Dhtmlxgrid分页代码解析

本文介绍如何使用Dhtmlxgrid实现真分页功能,包括数据分组、排序及翻页后的分组更新等操作。通过监听排序事件自定义排序方式,并详细解释了如何从前端获取参数并应用到数据加载过程中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//------------------------Dhtmlxgrid真分页代码解析---------------------------//

//
//
//
//
//
//---------分组代码-----------//
//页面上可以增加数据分组
//其中参数5是根据第五列的内容进行分组
grid.groupBy(5);
//---------分组代码-----------//


//---------排序代码-----------//
//通过onBeforeSorting事件,对用户点击排序的时间进行监听
//增加排序监听器
//ind是用户选择排序的列
grid.attachEvent("onBeforeSorting", function(ind){
customColumnSort(grid,ind);
});
//排序
function customColumnSort(grid,ind){
//获取当前grid的排序状态
var a_state = grid.getSortingState();
//添加window全局的属性
   window.s_col = ind;//排序的列
//正则表达式
//如果当前列的状态的排序为升序,则改为降序
   window.a_direction = ((a_state[1] == "des") ? "asc": "des");
//重新加载页面
    reloadGrid(grid);
    return false;
}
//---------排序代码-----------//

//---------重新加载grid代码-----------//
//重新加载数据
function reloadGrid(grid){
    grid.clearAndLoad("<计算的值>Agent_GetView?OpenAgent" + "&orderBy=" + window.s_col + "&direction=" + window.a_direction);
//改变升序、降序的图标显示
    if(window.a_direction){
     grid.setSortImgState(true, window.s_col, window.a_direction);
}
}
//---------重新加载grid代码-----------//
//---------翻页后进行分组-----------//
//增加翻页后分组
grid.attachEvent("onPageChanged", function(ind,fInd,lInd){
//数据加载后分组
grid.groupBy(5);
});
//---------翻页后进行分组-----------//



//
//
//
//
//



//---------首先获取前台传过来的参数-----------//
REM 对post过来的数据进行解码
queryAr = Evaluate(|@URLDecode("Domino";Query_String)|,doc)
strPost = queryAr(0)


REM 设置起始位置数
If GetParameter("posStart",strPost) <> "" Then
posStart = GetParameter("posStart",strPost)
Else
//默认从第0条数据开始加载
posStart = 0
End If
REM 设置一页展示的条数
If GetParameter("count",strPost) <> "" Then
count = GetParameter("count",strPost)
Else
REM 默认第一次加载50条
count = 50
End If

//根据选择不同的列,对orderBy、orderByFormula进行赋值
REM 设置取得排序列
If GetParameter("orderBy",strPost) <> "" Then
REM 按标题排序
If GetParameter("orderBy",strPost) = "0" Then
orderBy = "0"
orderByFormula = "REQUESTNUMBER + CallShortName + subject"
End If
REM 按当前处理人
If GetParameter("orderBy",strPost) = "1" Then
If viewtype = "recyclebin" Then
orderBy = "1"
orderByFormula = "sys_delmanshortname"
Else
orderBy = "1"
orderByFormula = "Cur_approver"
End If
End If
REM 按当前状态
If GetParameter("orderBy",strPost) = "2" Then
orderBy = "2"
orderByFormula = "Status"
End If
REM 按起草时间
If GetParameter("orderBy",strPost) = "3" Then
orderBy = "3"
orderByFormula = "@Created"
End If
Else
REM 默认是按时间排序
orderBy = "3"
orderByFormula = "@Created"
End If

REM 排序列方向[升序与降序]
If GetParameter("direction",strPost) <> "" Then
direction = Ucase(GetParameter("direction",strPost))
Else
REM 默认是按时间排序,递减
direction = "DES"
End If
//---------首先获取前台传过来的参数-----------//


//最后就是根据不同的条件进行对数据库不同的查询
//如果是domino数据库的,可以创建自定义视图,然后再取值
//如果是关系型数据库,可以创建不同的SQL语句进行查询
//萝卜青菜各有所爱。
//希望以上的代码能帮到您们。
//------------------------Dhtmlxgrid真分页代码解析--------------------------//
1 之前上传了dhtmlx的官方demo上去 都很久了 (http: download youkuaiyun.com detail pxzsky 2946815)看大家最近有需求 希望得到实际的使用代码 因为组件很多 所以我觉得大家可能对一些核心组件还是很感兴趣的 特别是分页列表 树等 这个在项目测试中我都用过了 这次先把列表的拿出来 2 因为涉及版权问题 如果你的产品要开源或者花钱购买授权 都没问题 否则最好还是仅仅内网学习使用 否 则需要考虑后果的 目前dhmtl只有GPL协议和商业协议 3 在我的其他资源中也有关于列表和树的组件使用示例: http: download youkuaiyun.com detail pxzsky 6659071 这个工程是免费的(也可以认为开源) 里面使用了dhtml tree grid 很多地方用了tree 而grid目前只剩下角色管理列表了 后续也不想再用grid了 你可以参考 如果不想麻烦 那么就接着往下看 4 在它的免费版中(就是可以开源的) 最早(2 5)是没有分页库的 只有商业版有 后来经过高人指点 得到了crack 带有分页js库 很好用 其实主要是知道js中要传递的分页参数名字就ok了 5 资源包中有具体使用代码和组件的整个js 前端使用jsp 你只需要看分页那部分即可 其他的传的变量可以不管 以下粘贴重要的ui代码调用: <script type "text javascript"> var currpage <% request getParameter "cntPage" %>; 记录当前页面 $ document ready function { 初始化列表 initGrid ; } ; window dhx globalImgPath "${ctx} images public "; 初始化列表 function initGrid { showSkyLoading "数据加载中 请稍候 " ; mygrid new dhtmlXGridObject "projectlist" ; mygrid setImagePath " script dhtml grid imgs " ; mygrid setHeader "客户 项目 状态 是否ZZ 审核 提交时间 提交人 编辑 删除" ; mygrid setInitWidths " 180 90 50 70 90 70 50 50" ; mygrid setColAlign "left left left center left left left left left" ; mygrid setColTypes "ro ro ro ro ro ro ro ro ro" ; mygrid enableAutoHeight true "460" ; mygrid init ; mygrid setSkin "gray" ; mygrid enablePaging true ${splitPageSize} 5 "pagingArea" true "recinfoArea" ; mygrid loadXML "${ctx} project getProjectList action userScope " + ${userScope} ajustDms "xml" ; } function ajustDms { hideSkyLoading ; ajustFrameDms ; if currpage null && currpage "" && currpage "null" { mygrid changePage currpage ; } } < script> 后台接收分页参数: int iposStart 0; String posStart this getParameter "posStart" ; 相当于request getParameter "posStart" ; if posStart null && posStart equals "" { iposStart Integer parseInt posStart ; } int splitPageSize PreferenceUtil getSplitPageSize ; 当前列表分页条数配置(pageSize) 默认15条 SplitPageInfo spi new SplitPageInfo ; spi setPageSize splitPageSize ; 设置当前页信息 int currentPage 0; currentPage iposStart splitPageSize + 1; spi setCurrentPage currentPage ; 因为这个版本已经很老了 所以在IE10或其他新浏览器中会有些变形 如果用新版本 这个分页库能不能继续使用只有自己再尝试了 希望这个对大家有用 ">1 之前上传了dhtmlx的官方demo上去 都很久了 (http: download youkuaiyun.com detail pxzsky 2946815)看大家最近有需求 希望得到实际的使用代码 因为组件很多 所以我觉得大家可能对一些核心组件还是很感兴趣的 特别是分页列表 树等 [更多]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值