easyui datagrid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <link href="css/easyui.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function onClik() {
            var jsonuserinfo = $("#form1").serializeArray(); //自动将form表单封装成json
            alert(jsonuserinfo);
            $.post("WebServiceDemo.aspx", { myjson: jsonuserinfo }, function backCall(data) {
                //alert("调用webservice成功!");
                var map = $.parseJSON(data);
                $('#mytable').datagrid('loadData', map);
            });

        }
    </script>
</head>

    <body>
        <form id="form1">
            <input name="name" type="text" />
            <button onclick="onClik();return false;">查询</button>
        </form>
        <table id="mytable" class="easyui-datagrid" title="人员信息" style="700px;height:250px"
               data-options="singleSelect:true,collapsible:true">
            <thead>
                <tr>
                    <th data-options="field:'ID',80">编号</th>
                    <th data-options="field:'Name',100">姓名</th>
                    <th data-options="field:'Age',80,align:'right'">年龄</th>
                    <th data-options="field:'Birth',80,align:'right'">出生年月</th>
                    <th data-options="field:'address',250">地址</th>
                    
                </tr>
            </thead>
        </table>        
    </body>
</html>

后台

 protected void Page_Load(object sender, EventArgs e)
        {
            var d = Request.QueryString;
            DataTable dt = new DataTable();
            DataColumn dtc1 = new DataColumn("ID", typeof(int));
            DataColumn dtc2 = new DataColumn("Name", typeof(string));
            DataColumn dtc3 = new DataColumn("Age", typeof(int));
            DataColumn dtc4 = new DataColumn("Birdth", typeof(string));
            DataColumn dtc5 = new DataColumn("address", typeof(string));
            dt.Columns.Add(dtc1);
            dt.Columns.Add(dtc2);
            dt.Columns.Add(dtc3);
            dt.Columns.Add(dtc4);
            dt.Columns.Add(dtc5);
            DataRow dtr = dt.NewRow();
            dtr["ID"] = 12;
            dtr["Name"] = "wcb";
            dtr["Age"] = 54;
            dtr["Birdth"] = "2012-03-19";
            dtr["address"] = "长城";
            dt.Rows.Add(dtr);
            Response.Write(DataTable2Json(dt));
        }

        public static string DataTable2Json(System.Data.DataTable dt)
        {
            System.Text.StringBuilder jsonBuilder = new System.Text.StringBuilder();
            jsonBuilder.Append("{");
            jsonBuilder.AppendFormat(""total":{0}, ", dt.Rows.Count);
            jsonBuilder.Append(""rows":[ ");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append(""");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("":"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }
原文地址:https://www.cnblogs.com/mengxingxinqing/p/4287147.html