雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格添加分页
jQuery EasyUI 树形菜单 - 树形网格添加分页
本教程展示如何向带有动态加载特性的树形网格(TreeGrid)添加分页。

创建树形网格(TreeGrid)
启用树形网格(TreeGrid)的分页特性,必须添加 'pagination:true' 属性,这样页面加载时就会向服务器发送 'page' 和 'rows' 参数。
data-options="
url: 'treegrid4_getdata.php',
rownumbers: true,
pagination: true,
pageSize: 2,
pageList: [2,10,20],
idField: 'id',
treeField: 'name',
onBeforeLoad: function(row,param){
if (!row) { // load top level rows
param.id = 0; // set id=0, indicate to load new page rows
}
}
">
| Name | Quantity | Price | Total |
|---|
服务器端代码
treegrid4_getdata.php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
include 'conn.php';
$result = array();
if ($id == 0){
$rs = mysql_query("select count(*) from products where parentId=0");
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from products where parentId=0 limit $offset,$rows");
$items = array();
while($row = mysql_fetch_array($rs)){
$row['state'] = has_child($row['id']) ? 'closed' : 'open';
array_push($items, $row);
}
$result["rows"] = $items;
} else {
$rs = mysql_query("select * from products where parentId=$id");
while($row = mysql_fetch_array($rs)){
$row['state'] = has_child($row['id']) ? 'closed' : 'open';
$row['total'] = $row['price']*$row['quantity'];
array_push($result, $row);
}
}
echo json_encode($result);
function has_child($id){
$rs = mysql_query("select count(*) from products where parentId=$id");
$row = mysql_fetch_array($rs);
return $row[0] > 0 ? true : false;
}
发送到服务器的参数包括:
page:要加载的当前页面。
rows:页面尺寸大小。
id:父行的 id 值,从服务器返回的行将被添加。
当展开一个行节点时,'id' 值是大于 0 的。 当改变页码时,'id' 值应该被设置为 0 来放置加载子行。
下载 jQuery EasyUI 实例
jeasyui-tree-treegrid4.zip
本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格添加分页的更多相关文章
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点
jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单拖放控制
jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格动态加载
jQuery EasyUI 树形菜单 - 树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加分页组件
jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...
随机推荐
- 牛客网校招全国统一模拟笔试(二月场)- Java方向
1.请问下面关于与wait()一起使用的方法notify()的各种陈述,哪个正确? A 多个线程同时等待某个条件,则只有等待时间最长的哪个线程被通知 B 多个线程同时等待某条件,则没有办法预测哪个线程 ...
- Markdon 作图语法 CSDN
插入甘特图 gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 现有任务 已 ...
- MySQL 命令操作数据表
MySQL 命令操作数据表 1.查看表信息 desc hs_user_credit_info; 2.新增表字段 alter table hs_credit_order add search_relat ...
- Kibana --> Getting Started -->Building your own dashboard
https://www.elastic.co/guide/en/kibana/6.6/tutorial-build-dashboard.html Building your own dashboard ...
- 101. Symmetric对称 Tree
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
- hexo在github和coding.net部署并分流(一)
安装GIT和Node.JS 首先在自己的电脑上安装好git和node.js,这一步怎么做自己搜索,安装软件都是下一步下一步,应该不难,GIT安装完成后打开git cmd输入 git config -- ...
- hihoCoder week14 无间道之并查集
并查集的基本使用 #include <bits/stdc++.h> using namespace std; ; int n, fa[N]; int cnt, tot; map<st ...
- Cannot retrieve metalink for repository: epel 错误解决办法
centos下安装完EPEL源, 然后更新一下yum缓存, 如果发现这样的错误:Error: Cannot retrieve metalink for repository: epel. Please ...
- 常用for循环和for in 以及for of 的区别
用Es6对象扩展运算符(…)与rest运算符说明 function test(first,...a){ for(let val=0; val<a.length;val++){ console.l ...
- 微服务架构与实践4_Docker
构建Docker映像 定义Dockerfile=>Docker根据Dockerfile构建出映像 包含: 基础映像(父映像)信息 维护者信息 映像操作命令 容器启动命令 .net standar ...