C#中将数据绑定到Easyui的datagrid控件

最新推荐文章于 2023-05-18 09:05:18 发布

weixin_40444696

最新推荐文章于 2023-05-18 09:05:18 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40444696/article/details/81065698

本文总结了在C#中将数据绑定到Easyui datagrid控件的两种方法，包括通过自带URL获取JSON数据和手动加载JSON对象到datagrid。详细介绍了前后端的数据处理过程，特别指出js只能接收json类型数据的要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的工作中很多时候需要将数据加载到Easyui的datagrid控件中，在这个过程中，查询了EasyUI的API，也百度了很多方法，总结下我使用的两种方法的具体操作，给自己做个笔记。

前端页面代码：

<table id="dg" title="" toolbar="#toolbar" class="easyui-datagrid" iconCls="icon-select"
        data-options="rownumbers:true,fit:true,border:true,singleSelect:true,showHeader:true,pagination:true,pageSize:20">
        <thead>
            <tr>
                <th data-options="field:'FileName', width:240, align:'center'">
                    文件名
                </th>
                <th data-options="field:'MODEL', width: 120, align:'center'">
                    编号
                </th>
                <th data-options="field:'CREATE_TIME', width:50, align: 'center'">
                    创建时间
                </th>
            </tr>
        </thead>
</table>
<div id="toolbar">
        <a href="javascript:void(0)" id="btnSearch" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</div>

1、直接通过自带的URL获取数据源（即从该地址进入后台获取数据），然后通过field属性绑定数据。在这里就要注意js只能接收json类型的数据，所以我们要将后台的数据转为json对象再返回到前台。

前端js代码：

$("#dg").datagrid({
                pageNumber: 1,
                singleSelect: true,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                url: "请求的链接地址和需要传送的数据",
                loadFilter: function (data) {
                    var str = data.rows[0].PCS.toString();   //获取data中的PCS字段的数据
                    return data;
                }
            });

后台获取数据后转换为json对象：

var json = JsonHelper.JsonHelper.ConvertDataTable(ds.Tables[0]);     //后台返回datatable转换为json对象
var totalRecordCount = ds.Tables[1].Rows[0][0].ToString();           //获取数据行数
json = "{\"total\":" + totalRecordCount + ",\"rows\":" + json + "}"; //分页显示：total为一页总行数，rows为行数据
Response.Write(json);

2、通过其他方式获取数据转换成json对象，然后手动加载到datagrid。

a.将后台获取的数据加载到datagrid：

$('#dg').datagrid('loadData', data);   //data为后台返回的格式为json对象的数据源

//$('#dg').datagrid('loadData', { total: 0, rows: [] });//清空数据表格

b.直接声明一个json对象：

var obj = {"total":2,"rows":[{id:"1",name:"张三"},{id:"2",name:"李四"}]};   
$('#dg').datagrid('loadData',obj);

c.声明一个json字符串，然后转换为json对象：

var str = '{"total":2,"rows":[{id:"1",name:"张三"},{id:"2",name:"李四"}]}';   
var data = $.parseJSON(str);    
$('#dg').datagrid('loadData', data);

暂时就写到这了，第一次写技术贴，表达不好望见谅，如果有讲错的地方请多多指教。