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;

巴特西

easyui_datagrid使用

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

第一步

第二步

最新文章

热门文章