liger ui 表格
LigerUI - ligerGrid使用细节[1]
ORM框架使用的是MyBatis。
【1】查询列表参数传递
此时对后台mapper.xml要求尽可能使用map(若非表单对象传参,尽可能使用map传参接参),这样在后续扩展或根据不同列进行排序提供了更大的可能性与稳定性。
e.g : 一定要注意从页面传到后台的参数与sql中使用的参数是否一致(比如页面传sitenumber , sql使用site_number , 肯定抛异常)。
parameterType="hashmap" resultType="hashmap"
- 1
【2】设置列表某列不参与排序
ligerUI列表列点击是可以进行排序的,但是有些列是你自定义的,对象或sql表中并无该字段,这种情况下,可以设置该列不排序:
-- 设置的为列属性--columns
{
display:'操作',--显示名字,可以为一段html
name:'operation',
id:'operation',
align:'middle',-- 单元格内容显示位置
width:'5%',--宽度占据父容器的百分比
type:'string',--内容类型,string,int,date...
isSort:false, -- 定义不排序 !!!
render:function(row){ -- 单元格定义函数return f_html(row);
}},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
【3】获取表格列数据-后台返回形式
ligerGrid接收数据形式为 {Rows:[……],Total:}—json对象形式。
- 这里使用的是fastJSON。
String jsonString = "{\"Rows\":[],\"Total\":0}";
List<Map<String,Object>> list;
// 表格列数据内容
Long count;
// 表格列行数jsonString = String.format("{\"Rows\":%s,\"Total\":%d}", JSON.toJSONString(list,count);
//返回的数据格式-------如果数据有日期,需进行日期格式化处理:--------jsonString = String.format("{\"Rows\":%s,\"Total\":%d}", JSON.toJSONStringWithDateFormat(list,"yyyy-MM-dd HH:mm:ss"),count);//如果你返回的是list<User> users,且user里面有日期。那么可以使用下面形式进行日期格式化:JSON.DEFFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
String str = JSON.toJSONString(users,SerializerFeature.WriteDateUseDateFormat);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
或者如下形式 , 比上面形式更简洁:
-- 使用fastJSON;
ist<Map<String, Object>> listResult;
jsonObject.put("Rows", listResult);
jsonObject.put("Total", listResult.size());return jsonObject.toJSONString();//同样的方式,如果有日期需要转换,参考下面方法:String dateFormat="yyyy-MM-dd HH:mm:ss";return JSON.toJSONStringWithDateFormat(jsonObject, dateFormat, SerializerFeature.WriteDateUseDateFormat);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
【4】表格属性介绍
表格数据有两个属性,一个是Rows,一个是Total。其中Rows是一个数据数组,Total是记录的总数。
故如【3】所示,后台查询数据返回json形式String jsonString = "{\"Rows\":[],\"Total\":0}";
。
需要注意的是,配置表格列columns时并不一定要配置记录中的所有属性。只需要配置需要显示的列即可,但是记录中的所有属性值,都可以通过row对象获取(举例:没有显示出来name列,但是可以通过row.name获取值)。
也就是说,row包括了你返回的所有的属性以及自身属性!!
常见表格使用属性如下:
表格列显示--columnsvar data = [{display:'名字',name:'name',id:'name',align:'left',width:'60%',type:'string'},{display:'密码',name:'pwd',id:'pwd',align:'middle',width:'40%',type:'int'}];-- 获取表格数据;$("#listgrid").ligerGrid({ columns: data,//获取列parms: [{ name: "name",value: "tom"}],//发送的查询参数showTitle: false,//是否显示表格标题url: url,//发往服务器的链接dataAction: 'server',//从服务获取数据//data:myData,//本地数据,注意格式;//dataAction:'local',//本地数据需要设置为localsortName: 'id',//排序依据sortOrder:'desc',//排序升降pageSize: 20,//每页记录数height:'100%',width: '100%',usePager:true,//是否使用分页pageSizeOptions: [20,30,50,100],//每页记录数可供选择的参数onSelectRow: function (row, index, data){//row对象中封装了,被选中列的数据;index为行号,如r1001;data为HTMLTableRowElement。id = row.id;},//选中某行触发函数onDblClickRow : function (row, index, data){}, //双击某行触发函数detail:{ onShowDetail: showDetailFun,height:190 }//明细表格,需要自定义showDetailFun函数});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
当需要动态改变查询参数进行再次数据加载时:
function f_query(){var manager = $("#listgrid").ligerGetGridManager();manager.setOptions({ parms: [{name:"userCode",value:userCodeVal}]});//将会覆盖设置表格对象属性时的parms属性//查询时,设置为第一页!!manager.changePage("first"); //重新发起ajax请求,加载数据manager.loadData(true); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这里需要说明一下:
如果重新查询时,manager未设置params,那么仍旧使用设置表格对象时设置的参数,如parms: [{ name: "name",value: "tom"}]
如果重新查询时,设置了params,那么将不会使用设置表格对象时设置的参数。即,此时parms变为parms:[{name:"userCode",value:userCodeVal}];
但是如下四个参数不会丢弃(如果设置了分页和排序) :
page:1
pagesize:20
sortname:create_time
sortorder:desc
- 1
- 2
- 3
- 4
【5】列属性
示例一个列可能会有的属性与操作:
-- column的属性与操作;
{display: '序号', //表头列显示的文本,支持html//表头内容自定义函数headerRender: function (column) {return "<b>" + column.display + "</b>";},name: 'id', //单元格映射的行数据属性 align: 'center', //单元格内容对齐方式:left/center/right hide: false, //是否隐藏type: 'string', //类型,string、int、float、datewidth: 100, //列的宽度minWidth: 50, //列的最小宽度isSort: true, //是否允许此列排序,默认为允许排序 isAllowHide: true, //是否允许隐藏,如果允许,将会出现在【显示/隐藏列右键菜单】//自定义单元格渲染器。如果没有配置render,那么单元格显示的内容将由name确定。render : function (row) {//row 当前的行记录数据return row.column; //返回此单元格显示的HTML内容(一般根据row的列内容进行组织)},//列汇总totalSummary: {align: 'center', //汇总单元格内容对齐方式:left/center/right type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型render: function (e) { //汇总渲染器,返回html加载到单元格//e 汇总Object(包括sum,max,min,avg,count) return "<div>总数:" + e.count + "</div>";}},//单元格编辑器editor: {type: 'text'},//多表头支持columns: null
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
自定义表头(注意不是内容单元格)时,除了使用headerRender函数外,还可以把display直接设置为一段html:
{display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持htmlname: 'name',align: 'left'
},
- 1
- 2
- 3
- 4
- 5
自定义单元格示例如下:
{display: '姓名', name: 'name',align: 'left',render:function(row){if(row.name == 'Janus'){return "好人";}else{return "坏人";}}
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
单元格内容的显示规则:
1. 如果配置了render,使用render;2. 如果column的type参数扩展了对应的格式化器,那么使用格式化器进行渲染。比如定义了货币格式的格式化器;3. 最后才是使用默认显示方式。
- 1
- 2
- 3
- 4
- 5
【7】获取选中行对象的两种形式
有两种获取选中表格行对象的形式:
① var row = manager.getSelectedRow();
这种方式获取的是该行记录的json对象(可以直接使用data.key的形式获取值),包括你放进去的属性和列自身的属性。
如下图所示:
此时获取选中行的数据,比如id : id = row.id;
如果你选中了多行,那么该方法只会获取你第一次选择的row对象。
② var row = manager.getCheckedRows();
这种方式获取的是该行记录的json集合对象(可以使用data[0].key的形式获取第一行的属性值),包括你放进去的属性和列自身的属性。
如下图所示:
此时获取选中行的数据,比如id : id = row[0].id。
需要注意的是,如果使用了该方法获取row对象,那么即使只选中了一行,获取id也需要使用id = row[0].id
形式。
如果表格使用了复选框选中了多行,那么indexID = row[index].id。
【8】复选框的选中状态初始化
<script type="text/javascript">$(function () {window['g']=$("#maingrid4").ligerGrid({checkbox: true,//使用复选框columns: [{ display: '主键', name: 'CustomerID', align: 'left', width: 120 },{ display: '公司名', name: 'CompanyName', minWidth: 60 },{ display: '联系名', name: 'ContactName', width: 50,align:'left' }, { display: '联系名', name: 'ContactName', minWidth: 140 },{ display: '联系名', name: 'ContactName', minWidth: 140 }, { display: '联系名', name: 'ContactName', minWidth: 140 },{ display: '联系名', name: 'ContactName', minWidth: 140 },{ display: '城市', name: 'City' }], pageSize:30,data: CustomersData, width: '100%', height: '100%',isChecked: f_isChecked//判断复选框的选中状态});$("#pageloading").hide();});//判断函数(可自定义)function f_isChecked(rowdata){if (rowdata.CustomerID.indexOf('AN') == 0) return true;return false;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
返回的数据缩影如下:
var CustomersData =
{Rows:[{"CustomerID":"GODOS","CompanyName":"Godos Cocina Típica","ContactName":"José Pedro Freyre","ContactTitle":"Sales Manager","Address":"C/ Romero, 33","City":"Sevilla","Region":null,"PostalCode":"41101","Country":"Spain","Phone":"(95) 555 82 82","Fax":null}],
Total:1};
liger ui 表格相关推荐
- jQuery的UI框架 Liger UI
jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui
- el如何获取复选框的值_element ui 表格提交时获取所有选中的checkbox的数据
设定此属性@selection-change="changeFun",意思是每次勾选的时候都会触发这个事件 //复选框状态改变 changeFun(val) { this.mult ...
- element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
- element UI 表格做下滑滚动效果,请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
- element UI 表格实现 表尾合计行 ——小肉包
element UI 表格实现 表尾合计行 --小肉包 可以根据需要计算任意列的合计,效果图如下 说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
- Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框 有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
- element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
- element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑 案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- element ui 表格,通过下载按钮下载生成Excel表格
element ui 表格,通过下载按钮下载生成Excel表格,内容记录 // 安装插件 xlsx 和 file-saver import XLSX from "xlsx"; im ...
最新文章
- 解决安卓系统写入SD卡权限问题
- 96根电极每秒测量3万次,大脑植入物首次帮助瘫患者控制肌肉!
- File,FileInfo;Directory,DirectoyInfo的区别
- 非空约束对数据更新的影响
- Spring Boot + Vue 前后端分离开发,权限管理的一点思路
- Fiori应用deploy到云上后在Chrome开发者工具里Source标签页的外观
- 计算机仿真技术-基于matlab的电子信息类课程课后答案,计算机仿真技术:基于MATLAB的电子信息类课程(第4版)...
- 浅谈文字识别:新观察、新思考、新机遇
- springcloud工作笔记095---springcloud项目后端验证_hibernate validator后端校验字段_自己实现_快速开发
- win10启动项_win10 -- 取消不需要的开机启动项和服务项加快win10系统开机速度
- 设计模式--工厂模式(简单总结)
- C# 获取当前路径或父路径
- QT编程入门系列文章之三十三——国际化(上)
- 最新400多款微信公众号小游戏源码集合 带HTML5自适应首页
- Pr入门系列之三:新建序列
- 计算机专业sci二区论文难吗,SCI二区论文发表难度大吗
- Assembler如何把跳转汇编变成机器码的(一)
- 台式计算机开机后黑屏,电脑开机显示黑屏有关的问题与解决方法
- 关于阅读论文的一些感想
- 网络舆情风险和危机监测解决方案
热门文章
- 分享一些自己的学习经验和技巧
- 如何用python制作3d游戏_【教程】12个步骤让你快速学会制作3D游戏
- [学渣版]英语四、六级救急小套路总结
- vs2013 打开失败 未能完成操作,不支持此接口
- wallpaper 壁纸提取
- IDEA如何设置author头注解
- 《Python语言程序设计》刘卫国主编字符串与正则表达式习题5详解(选择)
- 2019杭电多校6,E.Snowy Smile(线段树维护子段和)
- 读书笔记_005 《董明珠传》
- Win7小工具“美女报时”,搜道版,v1.0.4.0