.net+easyui系列--datagrid

加载CSS

<link href="../../Public/easyui/SiteEasy.css" rel="stylesheet" type="text/css" />
<link href="../../Public/easyui/default/easyui.css" rel="stylesheet" type="text/css" />

加载JS

<script src="../../Public/easyui/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../Public/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../Public/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/Themes/Scripts/DatePicker/WdatePicker.js" type="text/javascript"></script>

JS加载显示的数据

 $('#Grid').datagrid({
                width: 'auto',
                height: document.documentElement.offsetHeight - 60,
                nowrap: true,
                striped: true,
                collapsible: true,
                url: 'ShenHe_List.aspx',
                queryParams: { key: escape($('#txtKey').val()), type: 'GetList', YLBXID: $("select[name$=fm_ylbxmc]").val(), BXZCBH: $("select[name$=fm_bxzcxx]").val() },
                sortName: 'YLBXID',
                sortOrder: 'desc',
                remoteSort: false,
                pageList: [20, 40, 80, 160],
                columns: [[
                 { field: 'ZLZMBH', title: '诊疗证书编号', width: 80, sortable: true, align: 'center' },
                 { field: 'ZMLX', title: '证明类型', width: 80, sortable: true, align: 'center', formatter: function (value) {
                     switch (value) {
                         case "01":
                             return "诊断证明";
                             break;
                         case "02":
                             return "病假证明";
                             break;
                         case "03":
                             return "护理证明";
                             break;
                         case "04":
                             return "费用证明";
                             break;
                         case "05":
                             return "返校证明";
                             break;
                     }
                 }
                 },
                 { field: 'JLLY', title: '记录来源', width: 60, sortable: true, align: 'center', formatter: function (value) {
                     switch (value) {
                         case "00":
                             return "门诊";
                             break;
                         case "01":
                             return "急诊";
                             break;
                         case "10":
                             return "住院";
                             break;
                     }

                 }
                 },
                 { field: 'BRXM', title: '病人姓名', width: 70, sortable: true, align: 'center' },
                 { field: 'SFZHM', title: '身份证号', width: 150, sortable: true, align: 'center' },
                 { field: 'BRXB', title: '性别', width: 50, sortable: true, align: 'center' },
                 { field: 'BRNL', title: '病人年龄', width: 70, sortable: true, align: 'center' },
                 { field: 'RYSJ', title: '就诊时间', width: 110, sortable: true, align: 'center' },
                 { field: 'CYSJ', title: '离诊时间', width: 110, sortable: true, align: 'center' },
                 { field: 'LCZD', title: '临床诊断', width: 150, sortable: true, align: 'center' },
                 { field: 'CLJY', title: '处理意见', width: 150, sortable: true, align: 'center' },
                 { field: 'KSDM', title: '科室代码', width: 70, sortable: true, align: 'center' },
                 { field: 'KSMC', title: '科室名称', width: 70, sortable: true, align: 'center' },
                 { field: 'YSDM', title: '医生代码', width: 70, sortable: true, align: 'center' },
                 { field: 'YSXM', title: '医生姓名', width: 70, sortable: true, align: 'center' },
                 { field: 'BJTS', title: '病假天数', width: 60, sortable: true, align: 'center' },
                 { field: 'KDSJ', title: '开证明时间', width: 110, sortable: true, align: 'center' },
                 { field: 'DWDZ', title: '单位地址', width: 150, sortable: true, align: 'center' },
                 { field: 'SHJG', title: '审核结果', width: 60, sortable: true, align: 'center', formatter: function (value) {
                     switch (value) {
                         case "0":
                             return "未审核";
                             break;
                         case "1":
                             return "合格同意";
                             break;
                         case "9":
                             return "不合格";
                             break;
                     }

                 }
                 }

             ]],
                pagination: true,
                rownumbers: true,
                singleSelect: true,
                onDblClickRow: function () {
                    update();
                },
                onLoadSuccess: function (data) {
                    var bodyTds = $(".datagrid-body table tr");
                    bodyTds.each(function () {
                        $("td:eq(2) div", this).css("text-align", "left");
                        $("td:eq(3) div", this).css("text-align", "left");
                    })
                }
            }).datagrid('getPager').pagination({
                showPageList: false,
                showRefresh: false
            });

URL 是调用数据的路径

queryParams 是传递的参数

sortName 排序字段

columns：显示的字段数据

{ field: 'JLLY', title: '记录来源', width: 60, sortable: true, align: 'center', formatter: function (value) {
                     switch (value) {
                         case "00":
                             return "门诊";
                             break;
                         case "01":
                             return "急诊";
                             break;
                         case "10":
                             return "住院";
                             break;
                     }

                 }
 }

以上代码

formatter: function (value){}格式是替换数据

onDblClickRow 双击的事件
onLoadSuccess 加载完成后的时间

加载datagrid

<td align="left" style="height: 100%;">
<table id="Grid">
</table>
</td>

后台方法

private void GetList()
{

 string sql = string.Format("SELECT distinct * FROM zm_zlzm ");

DataTable dt = DbHelperOra.QueryTable(sql);

string strWhere = "";
DataSet ds = GetList(int.Parse(Request["rows"]), int.Parse(Request["page"]), strWhere);

//把DataTable转化成json
string josn = JSONHelper.JSONDataTable(ds.Tables[], Count(strWhere).ToString());
Response.Clear();
Response.Write(josn);
Response.End();
}

后台返回的JASON数据:

{ "total": ,"rows":[ { "ZLZMBH":"Z2","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"B2","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"Z4","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"F00000001","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"张三","BRXB":"男","BRNL":"14岁","DWDZ":"杭州市","RYSJ":"2015/2/10 0:00:00","CYSJ":"2015/2/10 0:00:00","LCZD":"临床诊断000","CLJY":"无处理意见","KSDM":"","KSMC":"儿科","YSDM":"","YSXM":"李四","KDSJ":"2015/2/10 0:00:00","SHDM":"","SHRXM":"胡谦","SHSJ":"0001/1/1 0:00:00","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"F2","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"张三","BRXB":"男","BRNL":"14岁","DWDZ":"杭州市","RYSJ":"2015/2/10 0:00:00","CYSJ":"2015/2/10 0:00:00","LCZD":"","CLJY":"","KSDM":"","KSMC":"儿科","YSDM":"","YSXM":"李四","KDSJ":"2015/2/10 0:00:00","SHDM":"","SHRXM":"","SHSJ":"0001/1/1 0:00:00","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"Z0","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"张三","BRXB":"男","BRNL":"14岁","DWDZ":"杭州市","RYSJ":"2015/2/10 0:00:00","CYSJ":"2015/2/10 0:00:00","LCZD":"","CLJY":"","KSDM":"","KSMC":"儿科","YSDM":"","YSXM":"李四","KDSJ":"2015/2/10 0:00:00","SHDM":"","SHRXM":"","SHSJ":"0001/1/1 0:00:00","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"Z1","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"张三","BRXB":"男","BRNL":"14岁","DWDZ":"杭州市","RYSJ":"2015/2/10 0:00:00","CYSJ":"2015/2/10 0:00:00","LCZD":"","CLJY":"","KSDM":"","KSMC":"儿科","YSDM":"","YSXM":"李四","KDSJ":"2015/2/10 0:00:00","SHDM":"","SHRXM":"","SHSJ":"0001/1/1 0:00:00","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"Y00000001","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"Z3","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"","BRXB":"男","BRNL":"","DWDZ":"","RYSJ":"","CYSJ":"","LCZD":"","CLJY":"","KSDM":"","KSMC":"","YSDM":"","YSXM":"","KDSJ":"","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""}, { "ZLZMBH":"B00000001","ZLZMDM":"","JLLY":"","SFZHM":"","BRXM":"李时珍","BRXB":"男","BRNL":"78岁","DWDZ":"杭州是","RYSJ":"2016/1/5 0:00:00","CYSJ":"2016/1/7 0:00:00","LCZD":"牙疼","CLJY":"拔牙","KSDM":"","KSMC":"口腔科","YSDM":"","YSXM":"大洋","KDSJ":"2016/1/20 0:00:00","SHDM":"","SHRXM":"","SHSJ":"","SHJG":"","SHRDM":"","ZC":"","BJTS":"","ZMLX":"","JBDM":"","JBMC":"","RN":""} ]}

显示效果