工作的需要，做了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，行变色
