easyui-datagrid分页查询
不想写语言描述了,直接代码吧!
js:
$(document).ready(function () { var driver_datagrid; $('#job').combobox({ url: '/VMS.UI/BindData/ScheamData?type=24', dataType: 'json' }); $('#station').combobox({ url: '/VMS.UI/BindData/ScheamData?type=29', dataType: 'json' }); $('#org').combotree({ url: '/VMS.UI/BindData/OrgData', dataType: 'json', //valueFiled: 'id', //textField:'text', onLoadSuccess: function () { $('#org').combotree('tree').tree("collapseAll"); } }); //function form2Json(id) { // debugger; // var arr = $("#" + id).serializeArray() // var jsonStr = ""; // jsonStr += '{'; // for (var i = 0; i < arr.length; i++) { // jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",' // } // jsonStr = jsonStr.substring(0, (jsonStr.length - 1)); // jsonStr += '}' // var json = JSON.parse(jsonStr) // return json //} function rowformater(value, row, index) { return "<a style='color:black;' href='/VMS.UI/VehicleDriver/DriverDetailInfo?iid=" + row.IID + "' >" + value + "</a>"; } driver_datagrid = $('#driver_datagrid').datagrid({ url: '/VMS.UI/VehicleDriver/GetDriverList', method: 'post', pagination: true, pageSize: 10, pageList: [10,15,20, 30], queryParams: getQuery(), fit: true, fitColumns: true, nowrap: false, border: false, idField: 'IID', sortName: 'IID', sortOrder: 'asc', columns: [[{ title: '内部ID', field: 'IID', width: 120, checkbox: true }, { title: '驾驶员姓名', field: 'Name', width: 100, formatter: rowformater }, { title: '出生日期', field: 'BirthDate', width: 120, formatter: formatDatebox }, { title: '身份证号', field: 'CardNumber', width: 150, sortable: true }, { title: '岗位', field: 'StationName', width: 100 }, { title: '工作性质', field: 'Job', width: 120 }, { title: '用工单位', field: 'Org', width: 120, sortable: true }, { title: '手机', field: 'MobilePhone', width: 120 }, { title: '固定电话', field: 'TelNumber', width: 120 }, { title: '准驾车型', field: 'AllowDriveVehicleType', width: 120 }, { title: '年审有效期', field: 'YearAuditEffectTime', width: 120, sortable: true, formatter: formatDatebox }]], toolbar: [ //{ // text: '增加', // iconCls: 'icon-add', // handler: function () { // } //}, '-', { // text: '编辑', // iconCls: 'icon-edit', // handler: function () { // } //}, '-', //{ // text: '删除', // iconCls: 'icon-remove', // handler: function () { // } //}, //'-', { // text: '取消编辑', // iconCls: 'icon-cancel', // handler: function () { // } //}, //'-', { text: '取消选中', iconCls: 'icon-undo', handler: function () { $('#driver_datagrid').datagrid('unselectAll'); } }, '-'] }); function getQuery() { var query = { Name: $('#name').val(), DrivingCertificate: $('#driverCar').val(), JobID: $('#job').combobox('getValue'), OrgID: $('#org').combobox('getValue'), Station: $('#station').combobox('getValue'), StartDate: $('#start').datebox('getValue'), EndDate: $('#end').datebox('getValue') } return query; } //$('#org').combotree({ // url: '/VMS.UI/BindData/OrgData', // onBeforeExpand: function (node, param) { // $('#org').combotree("tree").tree("options").url = "/VMS.UI/BindData/OrgData?root=Y&parentId=" + node.id; // }, // onSelect: function (node) { // alert(22); // } //}); clearSearch = function () { $('#name').val(""); $('#driverCar').val(""); $('#job').combobox('setValue', ''); $('#org').combotree('setValue', ''); $('#station').combobox('setValue', ''); $('#start').datebox('setValue', ''); $('#end').datebox('setValue', ''); driver_datagrid.datagrid('load', {}); }; //$('#org').combotree('reload'); //search = function () { // //$.post('/VMS.UI/VehicleDriver/GetDriverList', getQuery(), function (result) { // // //repairFormDatagrid.datagrid('loadData', result); // driver_datagrid.datagrid('load', getQuery()); //} $("#query").click(function () { //$('#driver_datagrid').datagrid('load', getQuery()) var queryParams = $('#driver_datagrid').datagrid('options').queryParams; queryParams = getQuery(); $('#driver_datagrid').datagrid('options').queryParams = queryParams; $("#driver_datagrid").datagrid('load'); //$('#driver_datagrid').datagrid({ queryParams: getQuery() }); //点击搜索 }); //$(function () { // driver_datagrid.datagrid('load', getQuery()); //}); // $(function () { // debugger; // driver_datagrid.datagrid('reload', getQuery()); //}); });
MVC:
/// <summary> ///获取车队人员列表数据 /// </summary> /// <param name="query">查询条件</param> /// <param name="page">页码</param> /// <param name="rows">行数</param> /// <returns>返回列表数据</returns> public JsonResult GetDriverList(QueryDriverCondation query, int page, int rows) { User user = Session["User"] as User; JsonResult result = new JsonResult(); if (user.RoleID == 4 || user.RoleID == 5) { //query.OrgType = orgImp.GetOrgTypesByIID(user.SupOrgID); List<DriverInfo> drivers = driverImp.GetDriverInfoList(query); int total = driverImp.GetTotal(query); var json = new { total = total, rows = drivers }; result = Json(json, JsonRequestBehavior.AllowGet); return result; } var jsonNull = new { total = 0, rows = "" }; result = Json(jsonNull, JsonRequestBehavior.AllowGet); return result; }
获取当前分页条的总条数:
var count = $grid.datagrid('getPager').data("pagination").options.total;
easyui-datagrid分页查询的更多相关文章
- easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- easyui datagrid 分页略解
easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...
- jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
随机推荐
- Ubuntu 下开发 Android 环境变量设置
-----------------------------------------------------ANDROID_SDK_HOME:/home/cmm/avds PATH:/home/cmm/ ...
- CSS中margin和position:relative的定位问题
一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- PL\SQL学习笔记
注释 单行--多行 一.declare一般用于做变量的申明.begin 程序体开始执行 end; 程序体结束exception .. dbms_output.put_line('绝对值'||v_ab ...
- [数据结构]Treap简介
[写在前面的话] 如果想学Treap,请先了解BST和BST的旋转 二叉搜索树(BST)(百度百科):[here] 英文好的读者可以戳这里(维基百科) 自己的博客:关于旋转(很水,顶多就算是了解怎么旋 ...
- 关于集合set ---STL
关于集合set的去重复,向集合中插入元素 #include<iostream>#include<set>using namespace std;int main(){ set& ...
- Nginx安装及配置虚拟主机
nginx安装部分 依赖环境 yum -y install gcc zlib openssl-devel zlib-devel 1. 下载好下面两个包:nginx-1.8.1.tar.gz pcre- ...
- PHP header使用
header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的字串,在标头与 HT ...
- (简单) POJ 1278 Catch That Cow,回溯。
Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...
- javascript模拟鼠标双击事件
通常我们在做开发的时候需要通过单击切换对立事件,简单做了一个模型. <!DOCTYPE html> <html> <head> <title>javas ...
- mysql问题: alter导致速度慢
1 如何并行执行. 数据库里有一个数据量非常大的表,当对这个表进行alter的时候,这时候该表是只读的,由于数据量很大alter时间很长,如果这时候有insert或update操作,有什么办法在这期间 ...