Mikel
以前easyUI用习惯了 换成layUI 的确好看了很多，但是table现目前还没有datagrid用起来方便快捷，于是封装了关于table的处理类。欢迎大家指正，我及时修改。包含：1、获取选中行 getSelect()2、获取所有行 AllRows
来源： 【table】–分享封装的table各种数据操作,欢迎指正 – Fly社区
以前easyUI用习惯了 换成layUI 的确好看了很多，但是table现目前还没有datagrid用起来方便快捷，于是封装了关于table的处理类。欢迎大家指正，我及时修改。
包含：
1、获取选中行 getSelect()
2、获取所有行 AllRows()
3、通过静态数据渲染 load(data)
4、通过options重新渲染 reload()
5、获取载入参数供修改后渲染 getOptions()
6、获取table上下文 getTableContent()
7、通过字段类型和字段的值选中某些行 selected(filed,resourse)
8、通过索引获取数据 getByIndex(index)
9、通过索引选中一行 selectedByIndex(index)
10、通过索引取消选中的一行 unselectedByIndex(index)
11、选中所有 selectedAll()
12、取消选中所有 unselectedAll()
13、更新索引所在的行 updateRow(index,data)
14、在最前面插入一行 appendAfterRow(data)
15、在最后面插入一行 appendBeforeRow(data)
16、在索引后插入一行 insertRow(index)
17、通过索引删除一行 deleteRow(index)
这些是我常用到的情况，下面是封装的table
<script type="text/javascript" src="${pageContext.request.contextPath}/modules/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/modules/plugins/layui/layui.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/modules/plugins/layui/css/layui.css">
<script type="text/javascript">
//列表类封装
function HYtablelist(tableoption){
var _this = this;
var options = tableoption;
var table;
var tableuse;
var tableIns;
this.romance = function(){
tableuse =layui.use('table', function(){
table = layui.table;
tableIns = table.render(options);
});
}
this.getSelect=function(){ //获取选中的行
var check = [];
var allData = _this.AllRows();
$.each(allData, function(){
if(this.LAY_CHECKED){
check.push(this);
}
});
return check;
}
this.AllRows=function(){//获取所有行 返回数组对象
return tableuse.table.cache[options.id];
}
this.load=function(data){//通过数组对象，重新刷新列表 会清空table的url避免刷新table导致修改的数据还原为url数据
var tmpurl = options.url;
options.url = null;
options.data = data;
table.render(options);
}
this.reload=function(){ //重载
tableIns.reload(options);
}
this.getOptions=function(){//获取载入参数
return options;
}
this.getTableContent=function(){//获取table上下文
return tableIns;
}
this.selected=function(filed,resourse){//选中某些行 filed判断字段 resourse需要选中行的数组对象
if(filed&&resourse&&resourse.length>0){
var allData = _this.AllRows();
$.each(allData, function(){
var datadefine = this;
var _value = eval('(datadefine.'+filed+')');
for(var _m = 0;_m<resourse.length;_m++){
if(_value==resourse[_m]){
datadefine.LAY_CHECKED=true;
}
}
});
_this.load(allData);
}
}
this.getByIndex=function(index){//通过索引获取数据
if(index!=undefined&&index!='undefined'){
var allData = _this.AllRows();
for(var _m = 0;_m<allData.length;_m++){
if(index==allData[_m].LAY_TABLE_INDEX){
return allData[_m];
}
}
}
}
this.selectedByIndex=function(index){//通过索引选中一行
if(index!=undefined&&index!='undefined'){
var allData = _this.AllRows();
$.each(allData, function(p1, p2){
if(this.LAY_TABLE_INDEX==index){
this.LAY_CHECKED=true;
}
});
_this.load(allData);
}
}
this.unselectedByIndex=function(index){//通过索引取消选中一行
if(index!=undefined&&index!='undefined'){
var allData = _this.AllRows();
$.each(allData, function(p1, p2){
if(this.LAY_TABLE_INDEX==index){
this.LAY_CHECKED=false;
}
});
_this.load(allData);
}
}
this.selectedAll=function(){//选中所有
var allData = _this.AllRows();
$.each(allData, function(p1, p2){
this.LAY_CHECKED=true;
});
_this.load(allData);
}
this.unselectedAll=function(){//取消选中所有
var allData = _this.AllRows();
$.each(allData, function(p1, p2){
this.LAY_CHECKED=false;
});
_this.load(allData);
}
this.updateRow=function(index,data){//更新索引所在的行
if(index!=undefined&&index!='undefined'&&data){
var allData = _this.AllRows();
var loadData=[];
$.each(allData, function(){
if(this.LAY_TABLE_INDEX==index){
loadData.push(data);
}else{
loadData.push(this);
}
});
_this.load(loadData);
}
}
this.appendAfterRow=function(data){//在最后面插入一行
if(data){
var allData = _this.AllRows();
allData.push(data);
_this.load(allData);
}
}
this.appendBeforeRow=function(data){//在最前面插入一行
if(data){
var allData = _this.AllRows();
var loadData=[];
loadData.push(data);
$.each(allData, function(){
loadData.push(this);
});
_this.load(loadData);
}
}
this.insertRow=function(index,data){//在索引后插入一行
if(index!=undefined&&index!='undefined'&&data){
var allData = _this.AllRows();
var loadData=[];
$.each(allData, function(){
loadData.push(this);
if(this.LAY_TABLE_INDEX==index){
loadData.push(data);
}
});
_this.load(loadData);
}
}
this.deleteRow=function(index){//通过索引删除一行
if(index!=undefined&&index!='undefined'){
var allData = _this.AllRows();
var loadData=[];
$.each(allData, function(){
if(this.LAY_TABLE_INDEX!=index){
loadData.push(this);
}
});
_this.load(loadData);
}
}
}
function clone(obj) {
var o;
if (typeof obj == "object") {
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for ( var j in obj) {
o[j] = clone(obj[j]);
}
}
}
} else {
o = obj;
}
return o;
}
</script>
这下面是测试页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div class="layui-btn-group hybtngroup">
<button class="layui-btn" onclick="testFun();">测试按扭</button>
</div>
<table class="layui-hide layuitable" id="user_datagrid"></table>
</div>
</body>
<script type="text/javascript">
var data = [{"updateBy":"4028803d4dbdd065014dbdd0ef0d000f","createTime":"2017-01-11 15:36:23","phone":"","updateTime":"2017-11-20 19:49:43","remarks":"","isDeleted":false,"password":"e10adc3949ba59abbe56e057f20f883e","createBy":"4028803d4dbdd065014dbdd0ef0d000f","version":18,"id":"4028806a598c71c801598c74d25f005b","createOrgCd":null,"organization":"太平洋公司","username":"zhangsan","rolename":"管理员1","OrgID":"4028806a598c71c801598c7418570058","email":"","updateOrgCd":null,"gender":"Male","locked":false,"fullName":"张三","deleteTime":null},{"updateBy":"4028803d4dbdd065014dbdd0ef0d000f","createTime":"2017-01-11 15:37:01","phone":"","updateTime":"2017-11-20 19:46:21","remarks":"","isDeleted":false,"password":"e10adc3949ba59abbe56e057f20f883e","createBy":"4028803d4dbdd065014dbdd0ef0d000f","version":4,"id":"4028806a598c71c801598c75675d005c","createOrgCd":null,"organization":"北冰洋公司","username":"badmin","rolename":"管理员2","OrgID":"4028806a598c71c801598c7418570058","email":"","updateOrgCd":null,"gender":"Male","locked":true,"fullName":"北冰洋公司管理员","deleteTime":null}];
var tableoption = {
id:'user_datagrid',
elem: '#user_datagrid'
,cols: [[
{type:'checkbox'}
,{field:'username',title: '账户名'}
,{field:'fullName',title: '用户名'}
,{field:'organization',title: '所属机构'}
,{field:'locked',title: '是否锁定',templet: '#lockedHandle'}
,{field:'rolename',title: '拥有角色'}
]]
,page: true
}
var hytable = new HYtablelist(tableoption);
hytable.romance();//渲染
hytable.load(data);//测试通过静态数据加载,也可以option中加url加载数据，也可以option中加入data加载数据。
//测试方法
function testFun(){
alert(JSON.stringify(hytable.getSelect()));//测试选中 包含索引号 是否选中字段
// alert(JSON.stringify(hytable.AllRows()));//获取所有数据
// alert(JSON.stringify(hytable.AllRows()));//获取所有数据
// hytable.selected('username',['zhangsan','badmin']);//选中行name中值为数组的行
// hytable.selectedByIndex(0);//索引选中
// hytable.unselectedByIndex(0);//取消索引选中
// hytable.selectedAll();//选中所有
// hytable.unselectedAll();//取消选中所有
// alert(JSON.stringify(hytable.getByIndex(0)));//通过索引获取一行
// var data = hytable.getByIndex(1);
// data.fullName="测试更新";
// hytable.updateRow(data.LAY_TABLE_INDEX,data);//更新所在行
// var data = hytable.getByIndex(1);
// var newData = clone(data);
// newData.fullName="测试添加最后一行";
// hytable.appendAfterRow(newData);//最后面添加一行数据
// var data = hytable.getByIndex(1);
// var newData = clone(data);
// newData.fullName="测试添加第一行";
// hytable.appendBeforeRow(newData);//第一行添加一行数据
// var data = hytable.getByIndex(1);
// var newData = clone(data);
// newData.fullName="第一行后面插入一行";
// hytable.insertRow(0,newData);//索引后面添加一行
// hytable.deleteRow(1);//通过索引删除一行
}
</script>
</html>
