C#的WebApi 与 EasyUi的DataGrid结合生成的可分页界面

1、从数据库每次取出的数据为当前分页的数据。

2、分页用的是EasyUI 的 Pagination控件，与DataGrid是相对独立的。

3、后台数据获取是通过WebApi去获取。

4、传入参数是：pageSize、pageNumber 及其它条件。传参用的是Post方法（Get同样可以).

效果如图：

其它的不说，直接上代码：

HTML代码：

 

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  6.     <title></title>  
  7.     <meta charset="utf-8" />  
  8.     <link href="/Content/themes/default/easyui.css" rel="stylesheet" />  
  9.     <link href="/Content/themes/icon.css" rel="stylesheet" />  
  10.     <link href="../../Content/bootstrap.min.css" rel="stylesheet" />  
  11.     <link href="../../Css/BootStrapExt.css" rel="stylesheet" />  
  12.   
  13.    <%-- <script src="/Scripts/jquery-1.11.3.min.js"></script>--%>  
  14.     <script src="../../JScript/jquery-easyui-1.5.1/jquery.min.js"></script>  
  15.     <script src="/Scripts/bootstrap.min.js"></script>  
  16.     <%--<script src="/Scripts/jquery.easyui-1.4.5.min.js"></script>--%>  
  17.     <script src="../../JScript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
  18.     <script type="text/javascript">  
  19.         //分页事件  
  20.         function RefreshPages(totalNum) {  
  21.             $('#uiPages').pagination('refresh', {   // change options and refresh pager bar information  
  22.                 total: totalNum,  
  23.                 pageList: [10, 15, 20, 25, 30, 50, 100]  
  24.             });  
  25.         }  
  26.   
  27.         $(function(){                        
  28.             GetUserData(0, 0);//加载dataGrid数据  
  29.             $('#uiPages').pagination({  
  30.                 onSelectPage: function (pageNumber, pageSize) {  
  31.                     GetUserData(pageSize, pageNumber);  
  32.                 }  
  33.             });  
  34.   
  35.         });  
  36.   
  37.         function GetUserData(psize,pnumber){  
  38.             var grid = $('#grid1');  
  39.             var pagesize = $('#uiPages').pagination("options").pageSize;        //分页控件的PageSize  
  40.             var currIndex = $('#uiPages').pagination("options").pageNumber + 1; //分页控件的当前页数  
  41.             if (psize > 0) {  
  42.                 pagesize = psize;  
  43.                 currIndex = pnumber;  
  44.             }  
  45.             var lno = $("#txt_LoginNo").val();  
  46.             var lnm = $("#txt_LoginName").val();  
  47.             var jsonStr = [{ "name": "pgSize", "value": pagesize }  
  48.                 , { "name": "pgIndex", "value": currIndex }  
  49.                 , { "name": "txt_LoginNo", "value": lno }  
  50.                 , { "name": "txt_LoginName", "value": lnm }  
  51.             ];  
  52.   
  53.             var request = JSON.stringify(jsonStr);  
  54.   
  55.             var uri = "/api/UsersInfo/GetUserList1";  
  56.             $.ajax({  
  57.                 url: uri,  
  58.                 type: 'post',  
  59.                 data: request,  
  60.                 contentType: "application/json",  
  61.                 success: function (data) {  
  62.                     //取回来的是一个DataSet,有两个表，第一个表第一行是总资料数。第二个表是当前页资料。  
  63.                     RefreshPages(data.Table[0].num);  
  64.                     $('#grid1').datagrid('loadData', data.Table1);  
  65.                 },  
  66.                 error: function (data) {  
  67.                     alert(data.responseText);  
  68.                 }  
  69.             });  
  70.         }  
  71.           
  72.         function chBrand(val, row)  
  73.         {  
  74.             if(val==0)  
  75.             {  
  76.                 return "品牌0";  
  77.             }  
  78.             else if (val=="1")  
  79.             {  
  80.                 return "品牌1";  
  81.             }  
  82.         }  
  83.   
  84.     </script>  
  85.     <style type="text/css">  
  86.         .panel-body {  
  87.             padding:0;  
  88.         }  
  89.     </style>  
  90. </head>  
  91. <body class="easyui-layout" style="overflow: hidden;">  
  92.     <form id="form1">  
  93.     <div data-options="region:'north',split:false,border:false" style="height: 35px; margin-top: 10px; padding-top: 0px; overflow: hidden;">  
  94.         <div class="row">  
  95.             <div class="col-xs-1 col-sm-1 col-lg-1"  style="padding-left:30px;">  
  96.                 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" id="a_addUser">Add </a>  
  97.             </div>  
  98.             <div class="col-xs-2 col-sm-2 col-lg-2">  
  99.                 <div class="col-xs-5 col-padding-0 col-text-right textbox5">登录名<span style="color: red;">%</span></div>  
  100.                 <div class="col-xs-7 col-padding-0">  
  101.                     <input id="txt_LoginNo" class="textbox textbox-text textbox5" name="txt_LoginNo" type="text" placeholder="">  
  102.                 </div>  
  103.             </div>  
  104.             <div class="col-xs-2 col-sm-2 col-lg-2">  
  105.                 <div class="col-xs-5 col-padding-0 col-text-right textbox5">  
  106.                     用户姓名<span style="color: red;">%</span>  
  107.                 </div>  
  108.                 <div class="col-xs-7 col-padding-0 ">  
  109.                     <input class="textbox textbox-text textbox5" id="txt_LoginName" name="txt_LoginName" type="text" placeholder="">  
  110.                 </div>  
  111.             </div>  
  112.             <div class="col-xs-2 col-sm-2 col-lg-2">  
  113.                 <div class="col-xs-12">  
  114.                     <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="a_search">Search</a>  
  115.                 </div>  
  116.             </div>  
  117.         </div>  
  118.     </div>  
  119.     <div data-options="region:'center',border:false" style="border-top: 1px solid #95B8E7; margin-top: 0; padding: 0; overflow: hidden;">  
  120.         <div class="easyui-layout" data-options="fit:true">  
  121.             <div data-options="region:'north',split:false,border:false" style="height: 30px; margin:0; padding: 0px; overflow: hidden;">  
  122.                 <div id="uiPages" class="easyui-pagination" data-options="total:0" style="border: 0px solid #95B8E7; margin: 0; padding: 0;">  
  123.                 </div>  
  124.             </div>  
  125.             <div data-options="region:'center',border:false,fit:true" style="border: 0px solid #95B8E7; margin-top: 0; padding: 0;">  
  126.                 <table id="grid1" class="easyui-datagrid"  style="width:100%; height: 99%; padding:0; margin: 0;"  
  127.                     data-options="singleSelect:true,collapsible:true,fit:true,border:false">  
  128.                     <thead>  
  129.                         <tr>  
  130.                             <th data-options="field:'row',width:50,align:'center'"></th>  
  131.                             <th data-options="field:'LoginNo',width:100">登录名</th>  
  132.                             <th data-options="field:'LoginName',width:100">用户姓名</th>  
  133.                             <th data-options="field:'AgentName',">代理商</th>  
  134.                             <th data-options="field:'AgentMobile',width:100,align:'right'">代理商电话</th>  
  135.                             <th data-options="field:'Brand',width:100,formatter:chBrand">所属品牌</th>                             
  136.                         </tr>  
  137.                     </thead>  
  138.                 </table>  
  139.             </div>  
  140.         </div>  
  141.     </div>  
  142.   </form>  
  143. </body>  
  144. </html>  
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <meta charset="utf-8" />
    <link href="/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="/Content/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../../Css/BootStrapExt.css" rel="stylesheet" />

   <%-- <script src="/Scripts/jquery-1.11.3.min.js"></script>--%>
    <script src="../../JScript/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <%--<script src="/Scripts/jquery.easyui-1.4.5.min.js"></script>--%>
    <script src="../../JScript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //分页事件
        function RefreshPages(totalNum) {
            $('#uiPages').pagination('refresh', {	// change options and refresh pager bar information
                total: totalNum,
                pageList: [10, 15, 20, 25, 30, 50, 100]
            });
        }

        $(function(){                      
            GetUserData(0, 0);//加载dataGrid数据
            $('#uiPages').pagination({
                onSelectPage: function (pageNumber, pageSize) {
                    GetUserData(pageSize, pageNumber);
                }
            });

        });

        function GetUserData(psize,pnumber){
            var grid = $('#grid1');
            var pagesize = $('#uiPages').pagination("options").pageSize;        //分页控件的PageSize
            var currIndex = $('#uiPages').pagination("options").pageNumber + 1; //分页控件的当前页数
            if (psize > 0) {
                pagesize = psize;
                currIndex = pnumber;
            }
            var lno = $("#txt_LoginNo").val();
            var lnm = $("#txt_LoginName").val();
            var jsonStr = [{ "name": "pgSize", "value": pagesize }
                , { "name": "pgIndex", "value": currIndex }
                , { "name": "txt_LoginNo", "value": lno }
                , { "name": "txt_LoginName", "value": lnm }
            ];

            var request = JSON.stringify(jsonStr);

            var uri = "/api/UsersInfo/GetUserList1";
            $.ajax({
                url: uri,
                type: 'post',
                data: request,
                contentType: "application/json",
                success: function (data) {
                    //取回来的是一个DataSet,有两个表，第一个表第一行是总资料数。第二个表是当前页资料。
                    RefreshPages(data.Table[0].num);
                    $('#grid1').datagrid('loadData', data.Table1);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        }
        
        function chBrand(val, row)
        {
            if(val==0)
            {
                return "品牌0";
            }
            else if (val=="1")
            {
                return "品牌1";
            }
        }

    </script>
    <style type="text/css">
        .panel-body {
            padding:0;
        }
    </style>
</head>
<body class="easyui-layout" style="overflow: hidden;">
    <form id="form1">
    <div data-options="region:'north',split:false,border:false" style="height: 35px; margin-top: 10px; padding-top: 0px; overflow: hidden;">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-lg-1"  style="padding-left:30px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" id="a_addUser">Add </a>
            </div>
            <div class="col-xs-2 col-sm-2 col-lg-2">
                <div class="col-xs-5 col-padding-0 col-text-right textbox5">登录名<span style="color: red;">%</span></div>
                <div class="col-xs-7 col-padding-0">
                    <input id="txt_LoginNo" class="textbox textbox-text textbox5" name="txt_LoginNo" type="text" placeholder="">
                </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-lg-2">
                <div class="col-xs-5 col-padding-0 col-text-right textbox5">
                    用户姓名<span style="color: red;">%</span>
                </div>
                <div class="col-xs-7 col-padding-0 ">
                    <input class="textbox textbox-text textbox5" id="txt_LoginName" name="txt_LoginName" type="text" placeholder="">
                </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-lg-2">
                <div class="col-xs-12">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="a_search">Search</a>
                </div>
            </div>
        </div>
    </div>
    <div data-options="region:'center',border:false" style="border-top: 1px solid #95B8E7; margin-top: 0; padding: 0; overflow: hidden;">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:false,border:false" style="height: 30px; margin:0; padding: 0px; overflow: hidden;">
                <div id="uiPages" class="easyui-pagination" data-options="total:0" style="border: 0px solid #95B8E7; margin: 0; padding: 0;">
                </div>
            </div>
            <div data-options="region:'center',border:false,fit:true" style="border: 0px solid #95B8E7; margin-top: 0; padding: 0;">
                <table id="grid1" class="easyui-datagrid"  style="width:100%; height: 99%; padding:0; margin: 0;"
                    data-options="singleSelect:true,collapsible:true,fit:true,border:false">
                    <thead>
                        <tr>
                            <th data-options="field:'row',width:50,align:'center'"></th>
                            <th data-options="field:'LoginNo',width:100">登录名</th>
                            <th data-options="field:'LoginName',width:100">用户姓名</th>
                            <th data-options="field:'AgentName',">代理商</th>
                            <th data-options="field:'AgentMobile',width:100,align:'right'">代理商电话</th>
                            <th data-options="field:'Brand',width:100,formatter:chBrand">所属品牌</th>                           
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
  </form>
</body>
</html>

WebAPI代码：

 

[csharp] view plain copy print?
  1. [HttpPost]  
  2.         public IHttpActionResult GetUserList1([FromBody]JArray js)  
  3.         {  
  4.             JToken jt = js.Single(e => e["name"].ToString() == "pgSize");  
  5.             int pgSize = int.Parse(jt["value"].ToString());  
  6.   
  7.             jt = js.Single(e => e["name"].ToString() == "pgIndex");  
  8.             int pgCurIndex = int.Parse(jt["value"].ToString());  
  9.   
  10.             jt = js.Single(e => e["name"].ToString() == "txt_LoginNo");  
  11.             string loginNo = jt["value"].ToString();  
  12.   
  13.             jt = js.Single(e => e["name"].ToString() == "txt_LoginName");  
  14.             string LoginName = jt["value"].ToString();  
  15.   
  16.             List<SqlParameter> Parameters = new List<SqlParameter>(); ;  
  17.             if (!string.IsNullOrWhiteSpace(loginNo))  
  18.             {  
  19.                 Parameters.Add(new SqlParameter("@LoginNo", loginNo));  
  20.             }  
  21.             if (!string.IsNullOrWhiteSpace(LoginName))  
  22.             {  
  23.                 Parameters.Add(new SqlParameter("@LoginName", LoginName));  
  24.             }  
  25.             int startIndex = (pgCurIndex - 1) * pgSize + 1;  
  26.             int endIndex = pgCurIndex * pgSize;  
  27.   
  28.             UsersInfo info = new UsersInfo();  
  29.             UsersBLL bll = new UsersBLL(info);  
  30.   
  31.             DataSet ds = bll.QueryByPage(Parameters.ToArray(), "", startIndex, endIndex);  
  32.             int recordCount = int.Parse(ds.Tables[0].Rows[0][0].ToString());  
  33.               
  34.             return Ok(ds);  
  35.         }  
[HttpPost]
        public IHttpActionResult GetUserList1([FromBody]JArray js)
        {
            JToken jt = js.Single(e => e["name"].ToString() == "pgSize");
            int pgSize = int.Parse(jt["value"].ToString());

            jt = js.Single(e => e["name"].ToString() == "pgIndex");
            int pgCurIndex = int.Parse(jt["value"].ToString());

            jt = js.Single(e => e["name"].ToString() == "txt_LoginNo");
            string loginNo = jt["value"].ToString();

            jt = js.Single(e => e["name"].ToString() == "txt_LoginName");
            string LoginName = jt["value"].ToString();

            List<SqlParameter> Parameters = new List<SqlParameter>(); ;
            if (!string.IsNullOrWhiteSpace(loginNo))
            {
                Parameters.Add(new SqlParameter("@LoginNo", loginNo));
            }
            if (!string.IsNullOrWhiteSpace(LoginName))
            {
                Parameters.Add(new SqlParameter("@LoginName", LoginName));
            }
            int startIndex = (pgCurIndex - 1) * pgSize + 1;
            int endIndex = pgCurIndex * pgSize;

            UsersInfo info = new UsersInfo();
            UsersBLL bll = new UsersBLL(info);

            DataSet ds = bll.QueryByPage(Parameters.ToArray(), "", startIndex, endIndex);
            int recordCount = int.Parse(ds.Tables[0].Rows[0][0].ToString());
            
            return Ok(ds);
        }

读库的我就不贴出来了，我这里用的是自已编写的一个BLL与Module结合紧密的一个DAL层，用SqlParameter传参是因为会对公网，用这个后不需再做SQL注入过虑。

 

最终返回的DataSet 里有两个表，第一个表是读出资料总数，一个Count(0) num，第二个表，是当前页的资料。所以对应的我HTML的data值也有两个Table。

posted @ 2017-11-21 16:26  zxh91989  阅读(963)  评论(0)  编辑  收藏  举报