1、EasyUI数据绑定

EasyUI 在统计数据表中比较方便。数据只要有只有配置响应的字段名称就可以很方便的进行绑定。个人目前知道有两种方式：

        方式一、

在页面的加载的时候，使用datagrid方法进行。如下代码：

$('#grid').datagrid({ title: '数据列表',                iconCls: 'icon-save',                nowrap: false,                striped: true,                                url: '<%Url.Action("LoadMyPostMeetings") %>',                remoteSort: true,                fitColumns: true,                fit: true,                width:'auto',                height:'auto',                idField: 'Guid',                frozenColumns: [[                    { field: 'Id', checkbox: true }                ]],                columns: [[                                        { field: 'Title', title: '标题', width: 80, align: 'left'},                    {                        field: 'Time',                        title: '时间',                        width: 60,                        align: 'left',                        formatter: function(value) {                            var date = (new Date(parseInt(value.substring(value.indexOf('(') + 1, value.indexOf(')')))));                            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();                        }                    },                    {                        field: 'ImportantLevel',                        title: '重要等级',                        width: 30,                        align: 'left',                        formatter: function(value) {                            switch (value) {                            case 0:                                return "普通";                            case 1:                                return "重要";                            default:                                return "非常重要";                                                            }                                                    }                    },                    { field: 'Address', title: '会议地点', width: 40, align: 'left' }                ]],                pagination: true,                rownumbers: true,                onLoadSuccess:function (data){                                     if(data.Identity) {                        for (var i = 0; i < data.rows.length; i++) {                            if (data.rows[i].IsCompleted == 1) {                                $(".datagrid-body >table tr").eq(i).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已关闭");;                            }                        }                    } else {                        for (var k = 0; k < data.total; k++) {                            $(".datagrid-body >table tr").eq(k).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已关闭");;                        }                    }                }});

这种方式可以在代码中对所要绑定的数据进行格式化，如以上代码中的formatter 。

            

方式二、由表定义需要显示的字段名称，datagrid函数获取数据进行绑定。如下：

<table id="userTable"  toolbar="#toolbar" >    <thead>        <tr>                    <th checkbox="true" field="Guid" />                    <th field="UserName" sortable="true" width="25%">用户名</th>                    <th field="AccountName" sortable="true" width="25%">账号</th>                    <th field="BeginIP" sortable="true" width="25%">起始IP</th>           <th field="EndIP" sortable="true" width="25%">截止IP</th>         </tr>    </thead>        </table>  $('#userTable').datagrid({                    title: '账号列表',                    iconCls: 'icon-save',                    nowrap: false,                    striped: true,                    url: '<%=Url.Action("LoadUsers") %>',                    remoteSort: true,                    fitColumns: true,                    fit: true,                    idField: 'Guid',                    frozenColumns: [[                        { field: 'Id', checkbox: true }                    ]]  }）;

总结：比较绑定表格的这两种方式，我发现：

一、第一种虽然需在JS中定义需要显示的字段数据，但是对数据可以方便的进行格式化。第二种方式，直接在表格中定义需显示的字段，却不太好对数据进行格式化。

  二、在使用datagrid对表格进行数据绑定的时候，  获取数据的URL信息（如：url: '<%=Url.Action("LoadUsers") %>'）在以后是不能变更的。这里的不能变更指的是不能换成另外一个Action进行获取另外的JSON数据对表格进行绑定处理。 当然，如需使用同一个Action进行处理，只是在Action中的参数不同，还是可以这样使用的。

可能以上第二点中说的不是文字表述的不是特别清楚明了，我这里举例进行说明.

 

      （图2） 

如上图，在表格上方有一组操作方法，在其中的【搜索】中，我弹出一个DIV，选中条件然后重新获取数据对表格进行绑定。这时，获取到JSON数据后，这样对表格进行重新绑定：

$("#userTable").datagrid('reload',jsonDatas) 

这样，由于对表格进行reload，又重新指定数据源，表格是显示了正确数据。但是，若此时，对表格的查询结果进行分页，则表格显示的数据不再是查询获取到的数据，而是重新返回到有datagrid中设置的url: '<%=Url.Action("LoadUsers") %>'在你选定的分页上的数据。问题就比较悲剧了。

在这点上，EasyUI也有一种解决问题的方式将 你选定的条件发送到Url指定的Controller进行处理，如下：

$("#userTable").datagrid('load',{'key1':'value1','key2':'value2'}); 

当然，url所指定的Action中需有key1、key2这样的参数。

【转自】http://www.cnblogs.com/tyb1222/archive/2012/09/24/2699863.html