web项目 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的免费皮肤。

三，easyui-datagrid的基本使用：

1，加载数据

a，通过post，url的方法向后端请求数据，如图所示：

View Code

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，行变色

View Code

b，列变色

View Code

4，为datagrid添加工具条

如下效果的工具条，是通过datagrid的 toolbar 属性来指定，要留意的是toolbar的控件名称需要加上#符号。

html代码：

<div id="tb">
    <a id='condition' href='#' class='btn btn-default more'><i class='fa  fa-ellipsis-v'></i>&nbsp;&nbsp;查询条件</a>
    @Html.ToolButton(string.Format(@"<a id='btnCreate' href='#' class='btn btn-default'><i class='fa fa-plus'></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Add), ActionCode.Create)
    @Html.ToolButton(string.Format(@"<a id='btnEdit' href='#' class='btn btn-default'><i class='fa fa-pencil'></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Edit), ActionCode.Edit)
    @Html.ToolButton(string.Format(@"<a id='btnDelete' data-content='Delete 1' href='#' class='btn btn-primary'><i class='fa fa-trash'></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Delete), ActionCode.Delete)
</div>

js代码：

 

5，做增，删，改操作

a,为datagrid增加一行

function addCallBack(data) {
    $('#List').datagrid('insertRow', {
        index: 0,
        row: data,
    });
    layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
}

b,为datagrid编辑一行

function editCallBack(data) {
    var selectData = $('#List').datagrid('getSelected');
    var selectIndex = $('#List').datagrid('getRowIndex', selectData);
    $('#List').datagrid('updateRow', {
        index: selectIndex,
        row: data,
    });
    layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 });
}

c,为datagrid删除一行

$("#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', { icon: 1, time: 1000 });
    }
    else {
        layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
    }
});

d,treegrid的操作方法略有区别，附上源码：

View Code

6，编辑单元格

 

具体代码实现

View Code

7，重置datagrid布局  $('#List').datagrid("resize");

$(function () {
    $(".more").click(function () {
        $(this).closest(".conditions").siblings().toggleClass("hide");
        $('#List').datagrid("resize");
    });
})