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)的更多相关文章

  1. Asp.Net MVC EasyUI DataGrid查询分页

    function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...

  2. Easyui datagrid 修改分页组件的分页提示信息为中文

    datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...

  3. easyui datagrid 加载静态文件中的json数据

    本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...

  4. EasyUi datagrid 表格分页例子

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){  $.ajax({  url: a ...

  5. easyui datagrid关于分页的问题

    easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理. 但是,最近项目跟webgis有关,数据查询直接是从服务中 ...

  6. easyUI datagrid 重复发送URL请求

    如果在table属性中配置了URL参数,在初始化datagrid时,会发送一次url请求.或者在js中datagrid{url:''}时,也会自动发送一次url请求. 在初始化datagrid时,我并 ...

  7. easyui datagrid 的分页刷新按钮

    datagrid  刷新bug: 情形: 当用户A,B  同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1,  B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...

  8. JQuery EasyUI datagrid pageNumber 分页 请求/加载 两次

    解决方案: 原因是 jquery.easyui.min.js 源文件中,由于第1页的total和其他页的total不相等,EasyUI会重新发起第1页的请求!1.jQuery EasyUI 1.4.1 ...

  9. EasyUI DataGrid 获得分页信息

    var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...

  10. JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...

随机推荐

  1. CentOS 上使用vscode 调试百度大数据分析框架Apache Doris BE

    A: 前期准备工作 1. 安装vscode,详细请参见vscode官网https://code.visualstudio.com/docs/setup/linux,摘要如下: sudo rpm --i ...

  2. 年薪30万的Android程序员必须知道的帖子

    https://github.com/Trinea/android-open-project

  3. python报头解决粘包简单实现

    client------------- #!/usr/bin/env python # encoding: utf-8  # Date: 2018/6/5 import socketimport st ...

  4. 配置mysql环境变量

    配置mysql环境变量(非必要) 说明:给mysql配置环境变量后我们就可以在cmd里运行mysql(开启.停止等操作) 1. 和其实环境变量的配置方法一样,我们打开环境变量配置窗口(组合键win+P ...

  5. django2.0新增功能流程

    1先在 models.py中,创建字段相关的内容,我这里添加一个博客分类的表 定义数据结构的地方 class PostType(models.Model): title = models.CharFi ...

  6. MPI 打包与解包函数 MPI_Pack(),MPI_Unpack()

    ▶ MPI 中与数据打包传输有关的几个函数 ● 函数 MPI_Pack() 与 MPI_Unpack() 的原型 MPI_METHOD MPI_Pack( _In_opt_ const void* i ...

  7. Maven(一) Maven3 的安装与配置

    Maven的安装以及环境变量的配置: a).在安装maven之前,先确保已经安装JDK1.7及以上版本,并且配置好JDK的环境变量. b).下载maven3,下载地址:http://maven.apa ...

  8. 6-查看centos中的用户和用户组

    转载自:http://www.cnblogs.com/ermao0423/p/9510636.html 查看centos中的用户和用户组 1.用户列表文件:/etc/passwd/ 2.用户组列表文件 ...

  9. FTP上传下载--python

    import socket import struct import json import subprocess import os class MYTCPServer: address_famil ...

  10. Laravel 在哪些地方使用了 trait ?

    laravel 框架大量使用了traits. 简单举几个例子: 在Eloquent中使用了trait .然后在model初始化的时候,有个boot方法,会自动判断当前的类用了哪些trait.然后得到一 ...