easyui_datagrid使用

easyui的datagrid显示数据的方式（使用了jQuery）

第一步

创建显示的格式，方法有两种：

第一种：在HTML标签中创建，类似如下的形式，参数可以在标签中设置，也可以在脚本中

这种方式在显示时不用再设置显示方式

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'this is a url',fitColumns:true,singleSelect:true">  
    <thead>  
        <tr>  
            <th data-options="field:'code',width:100">Code</th>  
            <th data-options="field:'name',width:100">Name</th>  
            <th data-options="field:'price',width:100,align:'right'">Price</th>  
        </tr>  
    </thead>  
</table>  

第二种：在JavaScript脚本中创建，在html标签中仅创建一个<div>标签，不用过多设置

这种在显示时需要通过  $(选择器).datagrid(显示格式变量名)  设置显示格式，之后的就和HTML的一致了

    <div id="show_data" title="this is install data list.">
    </div>

    var installData =
    {
        fitColumns: true,
        pagination: true,
        showfooter: true,
        rownumbers: true,
        striped: true,
        loadMsg: "loading...",
        singleSelect: false,
        pageSize: 30,
        fit: true,
        toolbar: [{
            text: "查询",
            iconCls: 'icon-search',
            handler: function () {
                return Search();
            }
        }],//toolbar
        columns:
        [
            [
                { field: 'ID', title: '安装单号', align: 'center', sortable: false },
                { field: 'City', title: '安装城市', align: 'center', sortable: false },
                { field: 'Type', title: '呈现方式', align: 'center', sortable: false },
            ]
        ]//column数组
    }//installData

这个类的所有属性名是固定的，在使用时datagrid会根据属性名设置相关属性。也可以在脚本其他位置用

变量名.属性名=...

来设置。

第二步

显示数据

方式一：直接在脚本中设置数据

        $('#show_data').datagrid(installData).datagrid({
                data: [
		        { "ID": "001", "CityName": "anhui", "Type": "a" },
		        { "ID": "002", "CityName": "shanghai", "Type": "b" }
                ]
            }
        );

第一个datagrid()设置显示格式，第二个设置显示数据，注意数据的格式

方式二：通过URL获取数据

这种获取的数据格式应该为JSON格式，如果你设置的URL指向的是自己的函数，那么这个函数返回的数据应该设置为JSON格式，如果设置的不对，即便接收到了也不会显示出来

设置之后datagrid就会自动将数据设置为URL获取的数据并显示

我的URL指向的是MVC下的控制器：

installData.url = '@(Url.Action("SearchData","Home"))';
//public string Action(string actionName, string controllerName);方法解释

控制器函数：

        public ActionResult SearchData()
        {
            Install i1 = new Install();
            Install i2 = new Install();
            i1.ID=1;
            i1.City="anhui";
            i1.Type="a";

            i2.ID=2;
            i2.City="shanghai";
            i2.Type="b";

            Install[] list = {i1,i2};
           // return Json(i1, JsonRequestBehavior.AllowGet);
            return Json(new {
                total=2,
                rows=list
            });
        }

JSON数据对象需要两个参数：total和rows

total是数据的总行数，rows是数据数组。格式自定，但是要和显示格式一致，只有datagrid能够解释（名称一致）的部分才会显示，否则接收到但是不显示

如果想要在请求的时候发送参数，将数据显示格式的queryParams属性设置为传递的参数。如果是多个，可以以如下格式：

        var queryParams =
        {
            "ID": $('#installID').textbox('getValue'),
            "City": $('#installCity').textbox('getValue'),
            "Type": $('#installType').textbox('getValue')
        };

        var queryParams = ... ;
        installData.queryParams = queryParams;