您的位置：首页 > 产品设计 > UI/UE

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

2017-04-24 19:57 344 查看
1、从数据库每次取出的数据为当前分页的数据。

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

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

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

效果如图：



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

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代码：

[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。

如果有更好的应用或问题，欢迎沟通加Q时注明csdn.net，谢谢！我QQ：14413511
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航