EasyUI datagrid 使用小结
用了 EasyUI
框架一段时间了,这个前端框架用起来还是挺方便的,也有很多现成的控件,看看官方文档应该还是能比较快用起来的。
在这里记录一下一些常用的控件的方法,遇到过的bug或者当初耗了一点时间来实现的功能吧。
1. datagrid
跳到指定页
var pager = $('#dg').datagrid('getPager'); // 获取分页Paper对象
var pageSize = pager.data("pagination").options.pageSize; // 获取当前设置的页面尺寸,即每页显示多少条数据
var pageNum = pager.data("pagination").options.pageNumber; // 获取当前页码
pager.pagination('select', pager.data("pagination").options.pageNumber + 1); // 选择下一页
吐槽一下……
这个我一直找 datagrid
找不到跳转到某一页的方法,后来仔细看发现 datagrid
的分页是通过 pagination
这个控件实现的,于是看 pagination
的相关文档就好了。
以后也要注意呀~~
2. datagrid toolbar
的显示与隐藏
隐藏整个工具栏: $('div.datagrid-toolbar').hide();
隐藏第一个按钮: $('div.datagrid-toolbar a').eq(0).hide();
显示则用 show();
3.
加载 datagrid
数据的代码要等页面加载完后再调用,否则如果用 onBeforeLoad
添加参数的时候有些值会取不到。
而且在页面没加载完时就调用的话,会引发向后台发送两次请求的bug。
4. datagrid
里面嵌入 checkbox
PS: 注意一点, datagrid
列的 formatter
方法是可以直接返回 html
代码的,这样就很简单了。
columns: [[
...
{
field: 'ShareGroup', title: '推送标配群', width: 200, sortable: false,
formatter: function (value, rowData, rowIndex) {
return "<div id='checkbox-div-" + rowIndex + "'>" +
"<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-0'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='0' onchange='changeCheckboxColor(" + rowIndex + ")' />小学</label>" +
"<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-1'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='1' onchange='changeCheckboxColor(" + rowIndex + ")' />初中</label>" +
"<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-2'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='2' onchange='changeCheckboxColor(" + rowIndex + ")' />高中</label>" +
"<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-3'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='3' onchange='changeCheckboxColor(" + rowIndex + ")' />幼儿</label>" +
"</div>";
}
},
...
]]
5. 使用 datagrid
后在 IE8
下出现 rowspan
为空或不是对象错误
解决办法看这篇文章:JQueryEasyUI IE8出现rowspan为空或不是对象
6. 改变行/列的样式
...
{
field: 'Price1', title: "单价(元)", width: 40, sortable: true,
// 改变列的样式
styler: function (value, rowData, rowIndex) {
if (rowIndex != 0 || $("#queryEmployee").combobox("getValue") > 0) {
return 'background-color:#CCFF99;';
}
}
}
...
// 给第一行的汇总添加不同的样式以突出显示
rowStyler: function (index, row) {
if (index == 0 && $("#queryEmployee").combobox("getValue") == -1) {
return 'background-color:#AAFFEE;';
}
},
7. datagrid
获取选中行的索引
没有直接的方法,要绕一下。
var row = $('#dg').datagrid('getSelected');
var rowIndex = $('#dg').datagrid('getRowIndex', row);
8. 一个bug:分页后,选中一行,再点刷新按钮,就会全选所有项
可能的原因:datagrid
的 idField
没有写对
EasyUI datagrid 使用小结的更多相关文章
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 控制EasyUI DataGrid高度
这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下: <table ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- jquery easyui datagrid翻页后再查询始终从第一页开始
在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
随机推荐
- PAT乙级-1057. 数零壹(20)
给定一串长度不超过105的字符串,本题要求你将其中所有英文字母的序号(字母a-z对应序号1-26,不分大小写)相加,得到整数N,然后再分析一下N的二进制表示中有多少0.多少1.例如给定字符串" ...
- char码值对应列表大全
Char("0") 为0的字符Char("1") Char("2") Char("3") Char("4&qu ...
- 序列化、反序列化(Serializable特性)
//需要被实例化的类 using System.Collections; using UnityEngine; [Serializable] public class SerializableClas ...
- Docker基础知识整理
Docker 1.安装2.三大组件 镜像/容器/仓库3.Docker数据管理4.构建Docker5.docker部署微服务 项目部署到Linux服务器 1.安装jdk2.安装tomcat3.将项目wa ...
- Android开发——Fragment的简单使用总结
前言: 之前搞项目的时候,就使用了这个Fragment,中间遇到了许多坑,把坑都解决了,现在写一篇较为简单的Fragment使用总结 Fragment的简单介绍: 简单来说,Fragment其实可以理 ...
- fastjson从1.1.41升级到1.2.28的坑
最近因为fastjson安全漏洞,升级jar包时,踩了一些坑. 新版本FastJsonHttpMessageConverter初始化,默认设置MediaType为*/* 背景: 使用Spring Re ...
- 手机端原生js实现下拉刷新数据
HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...
- push_back和emplace_back的区别
emplace_back能就地通过参数构造对象,不需要拷贝或者移动内存,相比push_back能更好地避免内存的拷贝与移动,使容器插入元素的性能得到进一步提升.在大多数情况下应该优先使用emplace ...
- [Luogu 1122] 最大子树和
题目 Description 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题 ...
- 笔记:Maven Web项目
生成Web项目模块 生成Web项目模板和生成其他项目的模板一致,差别是指定模板的类型,执行命令如下: mvn archetype:generate -DarchetypeArtifactId=mave ...