EasyUI的DataGrid绑定Json数据的解决方案

本来六点下班，拖到这个点，就是被这个问题缠住了，折腾两小时终于搞定了，分享记录一下吧。

需求：点击表格中的超链接字段，弹出对话框，对话框是超链接字段关联的另一表格信息。

之前用EasyUI都是在属性里面直接写url绑定数据，这次是必须手动绑定，点击超链接，后台ashx返回json数据绑定datagrid，用$("#dg").datagrid('loadData',json)试了半天不行，查了谷歌才知道得这么写$("#dg").datagrid('loadData',{ total: total, rows: json })，其中total是数据的总行数，因为现在我的ashx要返回两个数据：总行数和json，这个简单，ashx拼接字符串得到字符串res，到js用res.split('|')分割就行了。

 

正心想可以下班了，美了一把，改好之后再试，表格是画出来了，数据却没显示出来。用后台传过来的字符串直接放到json参数位置不行，折腾了半天才知道必须要转成json格式才能用。var json = JSON.parse(resdata); 搞定！ 下面贴代码——

 

HTML部分

    <div id="dlg" class="easyui-dialog" title="策略规则" style="width:550px;height:300px;"

        data-options="resizable:true,modal:true">

        <table id="dg" class="easyui-datagrid" style="width:550px;height:300px;"

            data-options="singleSelect:true,collapsible:true">

        <thead>

            <tr>

                <th field="MessageId" width="60">策略号</th>

                <th field="RuleId" width="60">规则号</th>

                <th field="RuleType" width="60"">规则类型</th>

                <th field="RuleStartValue" width="180">规则起始值</th>

                <th field="RuleEndValue" width="180">规则结束值</th>

            </tr>

        </thead>

        </table>

   </div>

 

JS部分

 function commShow(MessageId) {

        var url = "../ashx/Ploy.ashx";

        var data = { MessageId: MessageId };

        $.post(url, data, function (res) {

            var arr = res.split('￥');

            var total = arr[0];

            var resdata = arr[1];

            var json = JSON.parse(resdata);

            var datasource = { total: total, rows: json };

            $("#dg").datagrid('loadData', datasource);

            $('#dlg').dialog('open');

        })

    }

 

ASHX部分

   public void BindData(HttpContext context, string MessageId)

    {

        int total = 0;

        //获取该策略下的所有规则

        List<Rule> list = new List<Rule>();

        string sql = "select * from p_todpi_security_rule where message_id=" + MessageId;

        DataTable dt = Boco.DssPortal.Ploy.EntityDB.PloyDB.ExcuteSql(sql);

        for (int i = 0; i < dt.Rows.Count; i++)

        {

            Rule rule = new Rule();

            rule.MessageId = dt.Rows[i]["MESSAGE_ID"].ToString();

            rule.RuleId = dt.Rows[i]["RULE_ID"].ToString();

            string ruleType = dt.Rows[i]["RULE_ID"].ToString();

            //规则类型

            switch (ruleType)

            {

                case "1":

                    rule.RuleType="域名";

                    break;

                case "2":

                    rule.RuleType = "URL";

                    break;

                case "3":

                    rule.RuleType = "关键字";

                    break;

                case "4":

                    rule.RuleType = "源IP地址";

                    break;

                case "5":

                    rule.RuleType = "目的IP地址";

                    break; 

                default:

                    rule.RuleType = ruleType;

                    break;

            }

            rule.RuleStartValue = dt.Rows[i]["RULE_VALUESTART"].ToString();

            object o = dt.Rows[i]["RULE_VALUEEND"];

            

            if (dt.Rows[i]["RULE_VALUEEND"] != DBNull.Value && dt.Rows[i]["RULE_VALUEEND"]!=null)

                rule.RuleEndValue = dt.Rows[i]["RULE_VALUEEND"].ToString();

            else rule.RuleEndValue = "";

            list.Add(rule);

        }

        System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();

        string json = jss.Serialize(list);

        total = list.Count;

        context.Response.Write(total.ToString()+"￥"+json);

    }