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