EasyUI DataGrid 使用(分页,url数据获取,data转json)
EasyUI算是比较有名的,搜一下网上的资料也比较多,具体的参数,下载地址我就不写了
平常也不怎么写文章,大部分都是代码,有不能运行的可以直接评论回复
有可能遇到的问题:
json数据格式,这个要仔细对下,有错误的话无法正常显示数据
分页的原理:
向后台传递页数、和每页显示的条数,然后用sql语句取出对应的数据,转换为json字符串传到前台
首先,页面视图代码
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script> <link rel="stylesheet" href="~/Scripts/easyui.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/icon.css" type="text/css" /> <table id="test" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
>
<thead>
<tr> <th data-options="field:'GameID',width:100">Product</th>
<th data-options="field:'GameName',width:80,align:'right'">List Price</th>
<th data-options="field:'CompanyName',width:80,align:'right'">Unit Cost</th> </tr>
</thead>
</table> <script>
$('#test').datagrid({
url: 'GetGridData',
pagination: true,//分页控件
rownumbers: true,//行号
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
openDialog("add_dialog", "add");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function () {
openDialog("add_dialog", "edit");
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function () {
delAppInfo();
}
}],
pageSize: 10, //设置默认分页大小
pageList: [10, 15, 20, 25, 30, 35, 40, 45, 50], //设置分页大小
}); var p = $('#test').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 11 页',
displayMsg: '当前显示 1 - 11 条记录 共 11 条记录',
onBeforeRefresh:function(){
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
},
onChangePageSize: function () {
alert("pagesized changed");
}
}); </script>
//分页sql
//datagrid分页数据格式,sortname为按照哪一个字段排序,
//sortorder为desc、asc,startRecord为第几页,maxRecords为每页显示多少条
public DataTable GetDataSetBySQL(string sql, string sortname, string sortorder, int startRecord, int maxRecords)
{ DataSet ds = new DataSet(); int staRecord = (startRecord - ) * maxRecords + ;
int endRecord = (startRecord) * maxRecords + ; sql = "SELECT * FROM ( SELECT __tmp.*,ROW_NUMBER() OVER (ORDER BY __tmp." + sortname + " " + sortorder + ") AS RowNo FROM (" + sql;
sql += ") AS __tmp ) AS __tmplist WHERE RowNo>=" + staRecord + " and RowNo<" + endRecord + " ORDER BY RowNo "; DataTable dt=db.GetDataSet(sql,"d1"); return dt;
}
接下来是把datatable转换成datagrid需要的json数据格式
//datagrid需要的json数据格式,count为sql总的条数
public string DataTableToJson(DataTable dt,int count)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append("total\":");
jsonBuilder.Append(count);
jsonBuilder.Append(",");
jsonBuilder.Append("\"rows\"");
jsonBuilder.Append(":["); for (int i = ; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = ; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":"); jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\""); jsonBuilder.Append(",");
//jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - , );
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - , );
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
最后是获取数据的url代码
//rows为每页多少条数据,page为当前页数,datagrid空间post传过来的,直接接收即可
//一个两种方法获取page和rows
public string GetGridData(string rows,string page)
{
int pageSize = Convert.ToInt32(Request["rows"]);
int pageNum = Convert.ToInt32(Request["page"]);
//result为json数据格式测试
string result = "{\"total\":11,\"rows\":[{\"productid\":\"FI-SW-01\",\"productname\":\"Koi\",\"unitcost\":10.00,\"status\":\"P\",\"listprice\":36.50,\"attr1\":\"Large\",\"itemid\":\"EST-1\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}]}";
//return Json(result,JsonRequestBehavior.AllowGet); string sql = "select a.GameID,a.GameName,b.CompanyName from GameProfile a LEFT JOIN CompanyProfile b ON a.CompanyId=b.CompanyId";
string sqlcount = " select count(*) from GameProfile ";
DataTable dtrows = db.GetDataSet(sqlcount, "count");
int record = Convert.ToInt32(dtrows.Rows[][].ToString());
DataTable dt = GetDataSetBySQL(sql, "gameid", "desc",Convert.ToInt32(page),Convert.ToInt32(rows));
string result2 = DataTableToJson(dt,record);
return result2;
}
EasyUI DataGrid 使用(分页,url数据获取,data转json)的更多相关文章
- Asp.Net MVC EasyUI DataGrid查询分页
function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...
- Easyui datagrid 修改分页组件的分页提示信息为中文
datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...
- easyui datagrid 加载静态文件中的json数据
本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...
- EasyUi datagrid 表格分页例子
1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){ $.ajax({ url: a ...
- easyui datagrid关于分页的问题
easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理. 但是,最近项目跟webgis有关,数据查询直接是从服务中 ...
- easyUI datagrid 重复发送URL请求
如果在table属性中配置了URL参数,在初始化datagrid时,会发送一次url请求.或者在js中datagrid{url:''}时,也会自动发送一次url请求. 在初始化datagrid时,我并 ...
- easyui datagrid 的分页刷新按钮
datagrid 刷新bug: 情形: 当用户A,B 同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1, B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...
- JQuery EasyUI datagrid pageNumber 分页 请求/加载 两次
解决方案: 原因是 jquery.easyui.min.js 源文件中,由于第1页的total和其他页的total不相等,EasyUI会重新发起第1页的请求!1.jQuery EasyUI 1.4.1 ...
- EasyUI DataGrid 获得分页信息
var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...
- JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能
1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...
随机推荐
- 详解jenkins几个有用的插件如何使用(emma,findbugs)
原文:http://myeyeofjava.iteye.com/blog/1765552 findbugs使用方式: 目的:进行代码走查的自动化,能够提示垃圾代码或者提供代码优化的建议 1.首先下载f ...
- pandas read_csv读取大文件的Memory error问题
今天在读取一个超大csv文件的时候,遇到困难:首先使用office打不开然后在python中使用基本的pandas.read_csv打开文件时:MemoryError 最后查阅read_csv文档发现 ...
- vue.js常见面试题及常见命令介绍
Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...
- 7.25 9figting!
TEXT 87 Fund management基金管理 A Miller's tale 米勒传奇(陈继龙编译) Dec 7th 2006 From The Economist print edit ...
- JS nodeJs 的日期计算
目录[-] date-utils Static Methods 静态方法 Instance Methods 接口方法 date-utils 前端引用 <script type="tex ...
- 搭建双系统win10+ubuntu17.10
0. 序言 这里采用先装win10,再装ubuntu的顺序.这样可以避免后面系统启动项设置的问题.都采用UEFI引导方式,且使用usb2.0的u盘来引导(3.0的话,要准备好3.0的驱动).另外注意的 ...
- DropDownList绑定数据的几种方式
1. 视图中添加可以直接通过单击属性"Items"后的按钮为某一DropDownList控件添加数据项.每添加一项数据就是添加了一个ListItem(列表控件中的数据项).这种方式 ...
- 微信H5支付常见问题汇总
常见问题 一.回调页面 正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面. 如,您希望用户支付完成后跳转至 ...
- jsp页面拨打电话和QQ聊天
拨打电话: <a href="tel:手机号">拨打电话</a> 这种方式塞班.安卓与iphone都支持. 参考文章:https://blog.csdn.n ...
- Visual Studio 2013 boost
E:\Visual Studio 2013\install\VC\bin\amd64>E:\IFC\boost_1_56_0_vs2013'E:\IFC\boost_1_56_0_vs2013' ...