Sam Xiao 通过本文主要向大家介绍了easyui,datagrid等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一，引言
工作的需要，做了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的免费皮肤。
三，easyui-datagrid的基本使用：
1，加载数据
a，通过post，url的方法向后端请求数据，如图所示：
$('#List').datagrid({
title: "交易公司",
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
//idField:"ID",
//data: getData(),
url: "@Url.Action("GetList")",
methord: 'post',
rownumbers: true,
autoRowHeight: false,
fit: true,
//fitColumns: true,
striped: true, //奇偶行
singleSelect: true,//单选模式
checkOnSelect: false,
selectOnCheck: false,
collapsible: true,
pagination: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 20],
queryParams: { },
columns: [[
{ field: 'Company_Name', title: '公司名称', width: 100, sortable: false },
{ field: 'Abbreviation', title: '简称', width: 100, sortable: false },
{ field: 'Business_Address', title: '经营地址', width: 100, sortable: false },
{ field: 'Registered_Address', title: '注册地址', width: 100, sortable: false },
{ field: 'Tel', title: '电话', width: 100, sortable: false },
{ field: 'Fax', title: '传真', width: 100, sortable: false },
{ field: 'Contactor', title: '联系人', width: 100, sortable: false },
{ field: 'Payment', title: '结算方式', width: 100, sortable: false },
{ field: 'Beneficiary_Name', title: '开户名称', width: 100, sortable: false },
{ field: 'Beneficiary_Address', title: '开户地址', width: 100, sortable: false },
{ field: 'Advising_Bank', title: '通知行', width: 100, sortable: false },
{ field: 'Bank_Address', title: '银行地址', width: 100, sortable: false },
{ field: 'Swift_Code', title: '银行代码', width: 100, sortable: false },
{ field: 'Beneficiary_Account', title: '银行账户', width: 100, sortable: false },
{ field: 'Company_Chop', title: '电子章', width: 100, sortable: false },
{ field: 'Send_Url', title: '发件邮箱链接', width: 100, sortable: false },
{ field: 'Send_Email', title: '发件人邮箱', width: 100, sortable: false },
{ field: 'Remark', title: '备注', width: 100, sortable: false },
{ field: 'Created_By', title: '创建人', width: 100, sortable: false },
{ field: 'Creation_Date', title: '创建日期', width: 100, sortable: false },
{ field: 'Modify_By', title: '修改人', width: 100, sortable: false },
{ field: 'Modify_Date', title: '修改日期', width: 100, sortable: false },
]],
});
});
b，先定义好了datagrid的属性以及列，再通过loadData的方法设置datagrid的数据
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
//data: [],
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
collapsible: false,
pagination: false,
queryParams: { },
columns: [[
{ field: 'Country_Name', title: '国家名称', width: 100, sortable: false },
{ field: 'Item_Number', title: '物料编码', width: 100, sortable: false },
]],
});
var returnData = JSON.parse(response.data);
$('#Detail').datagrid("loadData", returnData);
2，合并单元格
有时候用户需要如下图的效果
可以在datagrid的onLoadSuccess事件里增加如下代码：
onLoadSuccess: function (data) {
//var opts = $('#List').datagrid('getColumnFields');
var opts = new Array("Item_Number", "Country_Name", "Item_Desc", "Item_Desc_En", "Item_Type", "Unit", "Hs_Code", "Destination_Code", "Status", "Remark", "Create_User", "Create_Date");
var rowsCount = data.rows.length;
var mark = 1;
for (var j = 1; j < rowsCount; j++)
{
var preCellVal = data.rows[j - 1]["Material_Id"];
var currentCellVal = data.rows[j]["Material_Id"];
if (preCellVal == currentCellVal) {
mark += 1;
for (var c = 0; c < opts.length; c++) {
var columnName = opts[c];
$(this).datagrid('mergeCells', {
field: columnName,
index: j + 1 - mark,
rowspan: mark
});
}
}
else {
mark = 1;
}
}
},
3，行，列变色
针对这样的行，列变色效果：
a，行变色
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
url: "@Url.Action("GetLines")",
methord: 'post',
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
collapsible: false,
pagination: false,
queryParams: { hid: $("#Hid").val() },
columns: [[
{ field: 'Material_No', title: '物料号', width: 100, sortable: false },
{ field: 'Description', title: '中文描述', width: 100, sortable: false },
{ field: 'En_Description', title: '英文描述', width: 100, sortable: false },
{ field: 'Unit', title: '单位', width: 100, sortable: false },
{ field: 'Quantity', title: '工单数量', width: 100, sortable: false },
{ field: 'Total_Actual_Send_Quantity', title: '已出货数量', width: 100, sortable: false },
{ field: 'Remark', title: '备注', width: 100, sortable: false },
]],
rowStyler: function (index, row) {
if (row.Quantity == 0) {
return 'background-color:pink;color:blue;font-weight:bold;';
}
},
});
b，列变色
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
width: "100%",
height: "100%",
data: [],
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
checkOnSelect: false,
selectOnCheck: false,
collapsible: false,
pagination: false,
queryParams: {},
columns: [[
{ field: 'sel', checkbox: true },
{ field: 'Material_No', title: '物料号', width: 80, sortable: false },
{ field: 'Description', title: '中文描述', width: 80, sortable: false },
{ field: 'Unit', title: '单位', width: 80, sortable: false },
{ field: 'Quantit