关于EasyUI中DataGrid控件的一些使用方法总结
一,DataGrid 控件的工作流程
1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板
2,Datagrid模板通过制定的Url发送请求,获取数据
3,Datagrid通过后台返回的Json将对应的数据按照Filed的名字进行匹配并显示
知道了这个流程那么,那么我们对整个的使用基本上有了百分之80的了解了
在第三步中,Datagrid会向后台发送一个请求,该请求是按照之前创建Datagrid时制定的url来访问的,
并且会自动添加两个参数
①,page:当前的页数
②,每页显示多少条数据
后台根据这两个条件就可以算出,需要查询的数据量(从第几条开始,需要查询几条)
begin=(page-1)*limt
开始记录=(当前页-1)*每页行数
如果当前页是4 每页显示4条
那么begin=(4-1)*4=12
可能这个地方会有疑问
第一页:1-4
第二页:5-8
第三页:9-12
第四页:13-16
那么起始条数应该是13啊
事实是这样的,因为在程序中0代表第一
所以在程序中是这样
第一页:0-3
第二页:4-7
第三页:8-11
第四页:12-15
这样那我们的查询语句就是select * from teacherInfo limit 12,4
但是你以为这样就ok了?
你图样图森破
其实Datagrid需要返回的json可以分为两大类
①,total 当前条件下查询的数据的总条数
②,rows 当前条件下所查询出的数据
只要有了这两条件前台就能算出,总共有多少页等次要信息
附上Datagrid返回Json的数据格式
{"total":28,"rows":[
{"fileName":"001","productname":"Koi"},
{"fileName":"002","productname":"Dalmation"},
{"fileName":"002","productname":"Rattlesnake"},
]}
这里的fileName productname 分别对应两个不同的Filed的Name
也就是说每行有两列
一列为fileName productname
这样系统就会自动按照名字来匹配相应的值!
关于EasyUI中DataGrid控件的一些使用方法总结的更多相关文章
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- EasyUI中datagrid控件的使用 设置多行表头(两行或多行)
EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: $('#divData'). ...
- easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案
在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var ...
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- EasyUI:datagrid控件简介
EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...
- easyUI的datagrid控件日期列格式化
转自:https://blog.csdn.net/idoiknow/article/details/8136093 EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表 ...
- winform中DataGrid控件的宽度设置
最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找 ...
- WPF中DataGrid控件内Button的Command和CommandParameter的绑定
场景:视频上传功能,上传列表使用DataGrid控件,视频有不同的状态对应不同的操作,DataGrid中最后一列为操作列,里面是Button控件.希望点击Button后执行对应的操作,但是设置Butt ...
随机推荐
- Django Nginx反代 获取真实ip
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Andale Mono"; color: #28fe14; backgr ...
- js禁止浏览器的回退事件
直接来个终极方案: 查找了好多资料才找到的,这种方式,可以消除 后退的所有动作.包括 键盘.鼠标手势等产生的后退动作. <script language="javascript&quo ...
- echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
- 水平方向的RecyclerView
最近做了一个项目需要实现一个卡片式的水平滑动,但是不能手势滑动,点击卡片上的按钮之后滑动到下一个卡片,所以想到用RecyclerView实现,去掉它的手势滑动,点击按钮之后再代码控制滑动到下一个卡片. ...
- JDBC 数据库连接操作——实习第三天
今天开始了比较重量级的学习了,之前都是对于Java基础的学习和回顾.继续上篇的话题,<谁动了我的奶酪>,奉献一句我觉得比较有哲理的话:"学会自嘲了,而当人们学会自嘲,能够嘲笑自己 ...
- js判断一个数组是否为空
var s = []; if(s.length == 0){ alert('空数组'); }
- nuget挂了吗?
[nuget.org] Unable to load the service index for source https://api.nuget.org/v3/index.json. 发送请求时出错 ...
- Linux之正则表达式
正则表达式与通配符的区别: 最常应用正则表达式的命令是grep(egrep),sed,awk. 正则表达式和通配符有本质区别,正则表达式用来找:[文件]内容,文本,字符串.一般只有三剑客支持.通配符用 ...
- Ionic 应用图标,信息修改
Ionic 应用图标,信息修改 Ionic 应用图标 修改 准备好替换的图标并生成各个尺寸的图标 1.使用命令行进入项目根目录,执行命令ionic resources 替换的图片放在resources ...
- redis内存管理
Redis主要通过控制内存上线和回收策略来实现内存管理. 1. 设置内存上限 redis使用maxmemory参数限制最大可用内存.限制的目的主要有: 用户缓存场景,当超出内存上限maxmemory时 ...