easyui-datagrid开发实践(总结)
前端之家收集整理的这篇文章主要介绍了
easyui-datagrid开发实践(总结)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
一，引言
工作的需要，做了3年的wpf(mvvm)……，又因为项目的需求，回归到web的开发。
- 3 years ago，vue是我三年前没用过的玩意儿。
- 3 years ago，bootstrap组件没现在成熟。
- 3 years ago，font awesome的普及度没有现在高。
- 3 years ago，ui组件的选择也没有现在多。
二，项目的前端（easyui模板订制）
整个项目采用了oracle + dapper + castle + mvc + easyui的技术结合，本篇博客重点介绍easyui。
easyui的默认风格看久了很容易产生视觉疲劳，在这个项目中，我个性化订制风格。
订制easyui模板的工作量是挺大的，我用了一个偷懒的方法，花了几百块钱在网上买了几个easyui的皮肤，然后对这些皮肤，进行优化和重构。
money比较紧的同学，可以去下载easyui的免费皮肤。
@H_301_33@
三，easyui-datagrid的基本使用：
1，加载数据
a，通过post，url的方法向后端请求数据，如图所示：
名称',width: 100,sortable: false },{ field: 'Abbreviation',title: '简称',{ field: 'Business_Address',title: '经营地址',{ field: 'Registered_Address',title: '
注册地址',{ field: 'Tel',title: '电话',{ field: 'Fax',title: '传真',{ field: 'Contactor',title: '联系人',{ field: 'Payment',title: '结算方式',{ field: 'Beneficiary_Name',title: '开户
名称',{ field: 'Beneficiary_Address',title: '开户地址',{ field: 'Advising_Bank',title: '
通知行',{ field: 'Bank_Address',title: '银行地址',{ field: 'Swift_Code',title: '银行
代码',{ field: 'Beneficiary_Account',title: '银行账户',{ field: 'Company_Chop',title: '电子章',{ field: 'Send_Url',title: '发件邮箱
链接',{ field: 'Send_Email',title: '发件人邮箱',{ field: 'Remark',title: '备注',{ field: 'Created_By',title: '创建人',{ field: 'Creation_Date',title: '创建日期',{ field: 'Modify_By',title: '
修改人',{ field: 'Modify_Date',title: '
修改日期',]],});
});
b，先定义好了datagrid的属性以及列，再通过loadData的方法设置datagrid的数据
名称',{ field: 'Item_Number',title: '物料编码',});
2，合并单元格
有时候用户需要如下图的效果
可以在datagrid的onLoadSuccess事件里增加如下代码：
3，行，列变色
针对这样的行，列变色效果：
a，行变色
中文描述',{ field: 'En_Description',title: '英文描述',{ field: 'Unit',title: '单位',{ field: 'Quantity',title: '工单
数量',{ field: 'Total_Actual_Send_Quantity',title: '已出货
数量',rowStyler: function (index,row) {
if (row.Quantity == 0) {
return 'background-color:pink;color:blue;font-weight:bold;';
}
},});
b，列变色
Box: true },{ field: 'Material_No',width: 80,{ field: 'Remain_Quantity',title: '剩余
数量',{
field: 'Actual_Send_Quantity',title: '本次出货',sortable: false,editor: { type: 'number
Box',options: {
required: true,min: 0 },},styler: function (value,row,index) {
return 'background-color:#ecffff;';
},{
field: 'Remark',editor: { type: 'text
Box',options: { validType: 'length[1,20]' },
4，为datagrid添加工具条
如下效果的工具条，是通过datagrid的 toolbar 属性来指定，要留意的是toolbar的控件名称需要加上#符号。
HTML代码：
查询条件
@Html.ToolButton(string.Format(@"
{0}",@CommonResource.Add),ActionCode.Create)
@Html.ToolButton(string.Format(@"
{0}",@CommonResource.Edit),ActionCode.Edit)
@Html.ToolButton(string.Format(@"
{0}",@CommonResource.Delete),ActionCode.Delete)
js代码：
5，做增，删，改操作
a,为datagrid增加一行
b,为datagrid编辑一行
c,为datagrid删除一行
d,treegrid的操作方法略有区别，附上源码：
function editCallBack(data) {
var row = $('#List').treegrid('getSelected');
$('#List').treegrid('update',{
id: row.Id,row: {
Name: data.Name,En_Name: data.En_Name,}
});
layer.msg('@CommonResource.ModifySuccess',time: 1000 });
}
$("#btnDelete").click(function () {
var row = $('#List').treegrid('getSelected');
if (row != null) {
layer.confirm('@CommonResource.ConfirmDelete',{
btn: ['@CommonResource.Sure','@CommonResource.Cancel'],shadeClose: true,function () {
if (row.ChildCount == 0 || typeof (row.ChildCount) == 'undefined') {
$.post("@Url.Action("Delete")/" + row.Id,function (data) {
if (data == "1") {
$("#List").treegrid('remove',row.Id);
layer.msg('@CommonResource.DeleteSuccess',time: 1000 });
}
else {
layer.msg('@CommonResource.Delete<a href="/tag/Failed/" target="_blank" class="keywords">Failed</a>',time: 1000 });
}
},"json");
}
else {
layer.msg('@CommonResource.Noselectedrecord',time: 1000 });
}
},function () {
});
}
else {
layer.msg('@CommonResource.Noselectedrecord',time: 1000 });
}
});
6，编辑单元格
具体代码实现
$.extend($.fn.datagrid.methods,{
editCell: function (jq,param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption',fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit',param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption',fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = -1;
function endEditCal() {
if (editIndex == -1) {
return true;
}
if ($('#Detail').datagrid('validateRow',editIndex)) {
$('#Detail').datagrid('endEdit',editIndex);
editIndex = -1;
return true;
}
else {
return false;
}
}
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',data: JSON.parse($("#MaterialDetailListStr").val()),columns: [[
{
field: 'Material_Use',title: '用途',formatter: function (value) {
for (var i = 0; i < manufactureList.length; i++) {
if (manufactureList[i].Key == value) return manufactureList[i].Value;
}
return value;
},editor: {
type: 'combo<a href="/tag/Box/" target="_blank" class="keywords">Box</a>',options: {
valueField: 'Key',textField: 'Value',data: manufactureList,<a href="/tag/required/" target="_blank" class="keywords">required</a>: true,panelHeight: "auto",editable:false,}
},{
field: 'Tax_Type',title: '税别',formatter: function (value) {
for (var i = 0; i < taxTypeList.length; i++) {
if (taxTypeList[i].Key == value) return taxTypeList[i].Value;
}
return value;
},data: taxTypeList,editable: false,{ field: 'Tax_Bcd',title: 'BCD',suffix: '%',precision: 2,min: 0,max: 100,} } },{ field: 'Tax_Cess',title: 'CESS',{ field: 'Tax_Igst',title: 'IGST',@if (Request.Params["Operate"] != "View")
{
<text>
onClickCell: function (index,field,value) {
if (endEditCal()) {
$(this).datagrid('selectRow',index).datagrid('editCell',{ index: index,field: field }); //编辑一个单元格
//$(this).datagrid('beginEdit',index); //编辑一行
editIndex = index;
}
else {
layer.msg('当前行的数据编辑有误',time: 1000 });
}
},onAfterEdit: function (index,changes) {
var rowData = $(this).datagrid('getData').rows[index];
$('#Detail').datagrid('updateRow',{
index: index,row: {},});
},onLoadSuccess: function (data) {
for (var index = 0; index < data.rows.length; index++) {
$(this).datagrid('beginEdit',index);
}
},</text>
}
});
$("#btnLineCreate").click(function () {
if (endEditCal()) {
editIndex = 0;
$('#Detail').datagrid('insertRow',{
index: editIndex,});
$('#Detail').datagrid('selectRow',editIndex);
$('#Detail').datagrid('beginEdit',editIndex);
}
else {
layer.msg('当前行的数据编辑有误',time: 1000 });
}
});
$("#btnLineDelete").click(function () {
var row = $('#Detail').treegrid('getSelected');
if (row != null) {
var rowIndex = $('#Detail').datagrid('getRowIndex',row);
$('#Detail').datagrid('deleteRow',rowIndex);
layer.msg('@CommonResource.DeleteSuccess',time: 1000 });
}
else {
layer.msg('@CommonResource.Noselectedrecord',time: 1000 });
}
});
$("#btnSave").click(function () {
var summaryValidate = true;
var rows = $("#Detail").datagrid("getRows");
$(rows).each(function (index,itemData) {
if ($('#Detail').datagrid('validateRow',index)) {
$('#Detail').datagrid('endEdit',index);
}
else {
summaryValidate = false;
return false;
}
});
if (summaryValidate) {
if (rows.length == 2) {
$("#MaterialDetailListStr").val(JSON.stringify(rows));
}
else {
layer.msg('税别,用途应该设置为2行数据',time: 1000 });
return false;
}
}
else {
layer.msg('当前表单数据编辑有误',time: 1000 });
return false;
}
var check = $('form').form('validate');
if (check) {
$.ajax({
url: "@Url.Action("CreateMaterial")",type: "Post",data: $("form").serialize(),dataType: "json",success: function (data) {
if (data.Key == "1") {
parent.$("#List").datagrid('reload');
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layer.msg('@CommonResource.AddSuccess',time: 1000 });
}
else {
layer.msg("物料编号'" + data.Value.Item_Number + "'在<a href="/tag/shujuku/" target="_blank" class="keywords">数据库</a>中已<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>",error: function (jqXHR,textStatus,errorThrown) {
layer.msg('@CommonResource.Add<a href="/tag/Failed/" target="_blank" class="keywords">Failed</a>',time: 1000 });
}
});
}
});
7，重置datagrid布局 $('#List').datagrid("resize");
四，总结
这些技巧，在帮助文档里也说的很详细，我只是把这些技术用于实践。希望对大家的学习有所帮助，也希望大家多多支持编程之家。
