zoukankan      html  css  js  c++  java

  • 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="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',50,align:'center'"></th>  
    131.                             <th data-options="field:'LoginNo',100">登录名</th>  
    132.                             <th data-options="field:'LoginName',100">用户姓名</th>  
    133.                             <th data-options="field:'AgentName',">代理商</th>  
    134.                             <th data-options="field:'AgentMobile',100,align:'right'">代理商电话</th>  
    135.                             <th data-options="field:'Brand',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="100%; height: 99%; padding:0; margin: 0;"
                    data-options="singleSelect:true,collapsible:true,fit:true,border:false">
                    <thead>
                        <tr>
                            <th data-options="field:'row',50,align:'center'"></th>
                            <th data-options="field:'LoginNo',100">登录名</th>
                            <th data-options="field:'LoginName',100">用户姓名</th>
                            <th data-options="field:'AgentName',">代理商</th>
                            <th data-options="field:'AgentMobile',100,align:'right'">代理商电话</th>
                            <th data-options="field:'Brand',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。
  • 相关阅读:
    Nginx配置文件nginx.conf中文详解
    Linux安装nginx
    熊猫TV游戏直播教程-OBS篇
    Mac下MySQL卸载方法
    sphinx 1.10-实时索引 api
    freebsd 国内相当快的ports源地址
    Springboot框架中如何读取位于resource资源中的properties配置文件，并将配置文件中的键对应的值赋值到目标bean中？
    分析Jedis源码实现操作非关系型数据库Redis
    分析线程池源码测试线程池
    socket简单示例实现从服务器拷贝文件到客户端
  • 原文地址：https://www.cnblogs.com/zxh1919/p/7873817.html
Copyright © 2011-2022 走看看