LigerUi中表(Grid)控件的相关属性笔记

本文详细介绍LigerGrid表格配置的各项参数及使用方法,包括列配置、数据操作、复选框使用、事件与方法等内容,帮助开发者快速掌握并运用到实际项目中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://blog.youkuaiyun.com/dxnn520/article/details/8216560

// ========================================= 【每一项的TYPE类型】
{ display: '主键', name: 'id', width: 50, type: 'int' },    // 整型
{ display: '生日', name: 'birthday', type: 'date', width: 100 },  // 日期型{ display: '主键', name: 'id', width: 50, type: 'Text' },   // 文本型

{display: "序号", name: "Sort", width: 50, type: "text", align: "left" },

//========================================== 【详细说明】
 【display】 -- 标题内容 -- 【display: "序号"】  【name】 -- 对应字段名称 -- 【name: "Sort"】\
 【width】 -- 宽度 -- 【width: 50】
 【type】 -- 文本型、数值型、日期型 -- 【type: "text",type: "int",type: "Text",type: "date",type:"float"】
 【align】 --   左对齐、右对齐、居中 -- 【align: "left" --left/center/right】
 【minWidth: 140 】 --列的最小宽度-- 【minWidth: 140】
 【hide】 -- 是否隐藏 -- 【hide: false】
 【minWidth 】 -- 列的最小宽度 -- 【minWidth: 40】
 【isSort】 -- 是否允许此列排序,默认为允许排序 -- 【isSort: true】
 【sAllowHide】 -- 是否允许隐藏,如果允许,将会出现在【显示/隐藏列右键菜单】 -- 【isAllowHide: true】
 【string】 -- 类型,用于排序 -- 【type: 'string'】
  【editor】 -- 单元格编辑器 -- 所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors,比如 
                editor: { type: 'text'},    // 【文本框】                editor: { type: 'select'},  // 【选择框】

[js]  view plain copy
 
  1. editor: { type: 'spinner' }   

             将会使用$.ligerDefaults.Grid.editors['spinner'] 进行创建编辑器进行构建。 
             ligerGrid内置提供了 复选框、文本框、日期、数字调整器、下拉框 等编辑器。

 

 【validate】 -- 验证控件 -- 【validate: { required: true, digits: true },】
   validate:    {        required: true,    // 是否必填项       digits: true       // 是否是数值型或数字       maxlength: 50      // 最大长度
       min:1              // 最小长度

   },



 【】 -- 最小值 -- 【】
 【】 -- 最小值 -- 【】
 【】 -- 最小值 -- 【】

// ==================================== 【表标头设置】

 
              表格的列提供了很完整的接口可以扩展。无论是内容单元格或者是表头单元格都可以对内容、布局、大小进行自定义。 
            自定义表头 
            比如表头,我们可以把display直接设置一段html: 
[js]  view plain copy
 
  1. <span style="font-size:14px; line-height:25px">            </span> {   
  2. <span style="font-size:14px; line-height:25px">            </span>     display: '&lt;a href="javascript:void(0)"&gt;部门&lt;/a&gt;', //表头列显示的文本,支持html   
  3. <span style="font-size:14px; line-height:25px">            </span>     name: 'name',   
  4. <span style="font-size:14px; line-height:25px">            </span>     align: 'left'   
  5. <span style="font-size:14px; line-height:25px">            </span> },   
            或者使用headerRender: 
[js]  view plain copy
 
  1. <span style="font-size:14px; line-height:25px">            </span>//表头内容自定义函数   
  2. <span style="font-size:14px; line-height:25px">            </span>headerRender: function (column)   
[js]  view plain copy
 
  1. <span style="font-size:14px; line-height:25px">            </span>{   
  2. <span style="font-size:14px; line-height:25px">            </span>   return "&lt;b&gt;" + column.display + "&lt;/b&gt;";   
  3. <span style="font-size:14px; line-height:25px">            </span>},   
// =======================================================【表 Grid的数据后和获取】和【排序】
 
url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label',  // url
sortName: 'Sort',   // 默认排序
enabledSort:true     // 就否允许排序
dataAction: 'server'   //提交数据的方式:本地(local)或(server),选择本地方式时将在客服端分页、排序 
 
pageSize: 20           // 默认一行显示页数
 
width: '100%', height: '100%',  // 自动根据窗口大小填充满屏  'auto'
 
checkbox: false      // 启用 打对勾的多选框
 
enabledEdit: true,   // 是否允许编辑
 
clickToEdit: false   // 就否允许单击进入编辑
heightDiff: -10      // 高度补差,当设置height:100%时,可能会有高度的误差,可以通过这个属性调整
tree: { columnName: 'CustomProducts_Name' },   // 通过树显示模式,树字段显示名称
columnWidth:100     // 默认列宽度
showTitle:false   //是否包含标题
 
  // ---------------------------------------- // 双击执行事件

       onDblClickRow : function (data, rowindex, rowobj)  
       {
          selectdepartment(); 
       },
 
dataAction: 'server', pageSize: 20, toolbar: {},

       url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label', sortName: 'Sort',

       width: '100%', height: '100%', heightDiff: -10, checkbox: false, enabledEdit: true, clickToEdit: false
// ===================================== 【复选框 - 记录多选框】
 
 

checkbox: false      // 启用 打对勾的多选框

 
<div id="maingrid4" style="margin:0; padding:0"></div>

[javascript]  view plain copy
 
  1. <pre><span style="font-size:14px;">$("#maingrid4").ligerGrid({  
  2.                 checkbox: true,  
  3.                 columns: [  
  4.                 { display: '主键', name: 'CustomerID', align: 'left', width: 120 },  
  5.                 { display: '公司名', name: 'CompanyName', minWidth: 60 },  
  6.                 { display: '联系名', name: 'ContactName', width: 50,align:'left' },   
  7.                 { display: '联系名', name: 'ContactName', minWidth: 140 },  
  8.                  { display: '联系名', name: 'ContactName', minWidth: 140 },   
  9.                  { display: '联系名', name: 'ContactName', minWidth: 140 },   
  10.                  { display: '联系名', name: 'ContactName', minWidth: 140 },  
  11.                 { display: '城市', name: 'City' }  
  12.                 ], dataAction: 'server',pageSize:30,  
  13.                 url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',   
  14.                 width: '100%',height:'100%'  
  15.             });</span></pre><span style="font-size:18px"><br>  
  16. </span>  
  17. <pre></pre>  
  18. <pre></pre>  
 
[javascript]  view plain copy
 
  1. <span style="font-size:14px;">var grid;  
  2.         $(function ()  
  3.         {  
  4.             grid = $("#maingrid4").ligerGrid({  
  5.                 checkbox: true,  
  6.                 columns: [  
  7.                 { display: '主键', name: 'CustomerID', align: 'left', width: 120 },  
  8.                 { display: '公司名', name: 'CompanyName', minWidth: 60 },  
  9.                 { display: '联系名', name: 'ContactName', width: 50, align: 'left' },   
  10.                 { display: '城市', name: 'City' }  
  11.                 ], dataAction: 'server', pageSize: 30,  
  12.                 url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',  
  13.                 width: '100%', height: '100%',  
  14.                 onCheckRow: function (checked,data,rowindex,rowobj)  
  15.                 {  
  16.                     checked && $.ligerDialog.alert('选择的是'+data.CustomerID);  
  17.                 }  
  18.             });   
  19.             $("#pageloading").hide();  
  20.         });  
  21.         function getCheckedData()     // 获取选择的复选框记录  
  22.         {  
  23.             var rows = grid.getCheckedRows();  
  24.             var str = "";  
  25.             $(rows).each(function ()  
  26.             {  
  27.                 str += this.CustomerID + ",";  
  28.             });  
  29.             $.ligerDialog.alert('选择的是' + str);  
  30.         }</span>  


[javascript]  view plain copy
 
  1. var jsonObj = {};  
  2.             jsonObj.Rows = [  
  3.                 { id: 3, name: "林三", sex: "男", birthday: "1989-01-12" },  
  4.                 { id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },  
  5.                 { id: 33, name: "啊三", sex: "男", birthday: "1981-12-12" },  
  6.                 { id: 34, name: "表三", sex: "男", birthday: "1983-01-12" },  
  7.                 { id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },  
  8.                 { id: 33, name: "成三", sex: "男", birthday: "1989-11-23" },  
  9.                 { id: 34, name: "都三", sex: "女", birthday: "1989-04-12" },  
  10.                 { id: 324, name: "鄂三", sex: "男", birthday: "1999-05-15" },  
  11.                 { id: 344, name: "林三", sex: "男", birthday: "1969-02-21" },  
  12.                 { id: 1, name: "王开", sex: "男", birthday: "1989-01-12" }  
  13.             ];  
  14.             $("#maingrid").ligerGrid({  
  15.                 columns: [  
  16.                 { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,  
  17.                     render: function (row)  
  18.                     {  
  19.                         var html = '<input type="checkbox" rowid="' + row.id + '">';  
  20.                         return html;  
  21.                     },  
  22.                     headerRender: function (column)  
  23.                     {  
  24.                         var html = '<input type="checkbox" onclick="selectAll(this)">';  
  25.                         return html;  
  26.                     }  
  27.                 },  
  28.                 { display: '主键', name: 'id', width: 50, type: 'int' },  
  29.                 { display: '名字', name: 'name', width: 50 },  
  30.                 { display: '性别', name: 'sex', width: 50, isSort: false  
  31.                 },  
  32.                 { display: '生日', name: 'birthday', type: 'date', width: 100 },  
  33.                 {  
  34.                     display: '模板列', isAllowHide: false,  
  35.                     render: function (row)  
  36.                     {  
  37.                         var html = '<a href="#" onclick="onedit(' + row.id + ')">编辑</a>';  
  38.                         return html;  
  39.                     }  
  40.                 }  
  41.                 ],width:'100%',  
  42.                 data: jsonObj,  
  43.                 url: "../Default.aspx", pkName: 'id',  
  44.                 pageSizeOptions: [5, 10, 15, 20],  
  45.                 onAfterShowData: function (grid)  
  46.                 {  
  47.                     if ($.fn.ligerCheckBox)  
  48.                         $(".l-grid-body input:checkbox,.l-grid-hd-cell input:checkbox", grid).ligerCheckBox({ css: { marginTop: 3} })  
  49.                 }  
  50.             });  


 
 
 
 
 
 
 
 

// ===================================== 【事件和方法】

 
 事件 
事件名参数描述
onAfterAddRow(e)增加行后事件
onAfterBeginEdit(e)开始编辑后事件
onAfterChangeColumnWidth(column, newwidth)改变列宽度事件
onAfterShowData(data)显示完数据事件
onAfterSubmitEdit(e)提交编辑 事件
onBeforeChangeColumnWidth(column, newwidth)验证 改变列宽度 是否通过
onBeforeCheckAllRow(checked, grid element)选择前事件,可以通过return false阻止操作(复选框 全选/全不选)
onBeforeEdit(e)编辑前事件
onBeforeShowData(data)显示数据前事件,可以通过reutrn false阻止操作
onBeforeSubmitEdit(e)验证编辑器结果是否通过
onBeginEdit(e)验证 开始编辑 是否通过
onCancelEdit(e)取消编辑 事件
onChangeSort()改变排序事件
onCheckAllRow(checked, grid element)选择事件(复选框 全选/全不选)
onCheckRow(checked, rowdata, rowindex, rowDomElement)选择事件(复选框)
onContextmenu(parm, e)右击事件
onDblClickRow(rowdata, rowindex, rowDomElement)双击行事件
onDragCol(node)拖动列事件
onError()错误事件
onLoaded()加载完函数
onLoading()加载时函数
onReload()刷新事件,可以通过return false来阻止操作
onSelectRow(rowdata, rowindex, rowDomElement)选择行事件
onSubmit()提交前事件
onSuccess()成功事件
onToFirst()第一页,可以通过return false来阻止操作
onToggleCol()切换列事件
onToLast()最后一页,可以通过return false来阻止操作
onToNext()下一页,可以通过return false来阻止操作
onToPrev()上一页,可以通过return false来阻止操作
onUnSelectRow(rowdata, rowindex, rowDomElement)取消选择行事件

 

例子 

[js]  view plain copy
 
  1. var grid = $("#maingrid").ligerGrid({   
  2.    columns:   
[js]  view plain copy
 
  1.     [   
  2.        { name: 'id', display: '序号', width: 200 },   
  3.        { name: 'name', display: '名称', width: 300 }   
  4.     ],   
  5. data: { Rows: griddata },   
  6. onSelectRow: function (rowdata, rowindex) {   
  7. //行记录 对于数据行   
  8. //行索引 第几行,从0开始   
  9. alert(rowdata.name);   
  10. }   
  11. });   
  12. grid.bind('SelectRow', function (rowdata, rowindex) {   
  13. //this 这里的this都是指向grid   
  14.   
  15. //行记录 对于数据行   
  16. //行索引 第几行,从0开始   
  17. alert(rowdata.name);   
  18. });   

方法
方法参数描述
addEditRow(rowdata)
  • 增加一个编辑行
addRow(rowdata, rowParm, isBefore, parentRow)
  • 增加新行
addRows(rowdataArr)
  • 一次性增加多行
appendRow(rowData, targetRow, nearRow, isBefore)
  • 附加新行(树模式)
beginEdit(rowParm)
  • 进入编辑状态
cancelEdit(rowParm)
  • 取消编辑
changeHeaderText(columnparm, headerText)
  • 改变表头文本
changePage(ctype)
  • 改变分页
changeSort(columnName, sortOrder)
  • 改变排序
collapse(targetRow)
  • 收缩(树模式)
collapseDetail(rowParm)
  • 收缩明细
deleteRow(rowParm)
  • 选择行
deleteSelectedRow()
  • 删除选择的行
demotion(targetRow)
  • 降级(树模式)
endEdit(rowParm)
  • 结束编辑
expand(targetRow)
  • 展开(树模式)
extendDetail(rowParm)
  • 展开明细
formatRecord(record)
  • 格式化数据,删除系统字段
getAdded()
  • 获取新增的数据
getCheckedRowObjs()
  • 获取选中的行 DOM对象集合
getCheckedRows()
  • 获取选中的行数据(复选框)
getChidren(rowParm)
  • 获取子节点数据(树模式)
getColumn(columnpam)
  • 获取列信息
getColumns(columnLevel)
  • 获取指定层级的Columns
getColumnType(columnname)
  • 根据列名获取列类型
getData(status, removeStatus)
  • 获取数据
getDeleted()
  • 获取删除过的数据
getParent(rowParm)
  • 获取父节点数据(树模式)
getRowObj(rowParm)
  • 行DOM转换为行数据
getSelected()
  • 获取选中的行数据(同getSelectedRow)
getSelectedRow()
  • 获取选中的行数据
getSelectedRowObj()
  • 获取选中的行 DOM对象
getSelectedRowObjs()
  • 获取选中的行 DOM对象集合
getSelectedRows()
  • 获取选中的行数据集合(支持Ctrl多选)
getSelecteds()
  • 获取选中的行数据集合(支持Ctrl多选)(同getSelectedRows)
getUpdated()
  • 获取修改过的数据
hasChildren(rowParm)
  • 是否包括子节点(树模式)
isLeaf(rowParm)
  • 是否叶节点(树模式)
isTotalSummary()
  • 是否包含汇总
loadData(loadDataParm)
  • 刷新数据
loadServerData(param, clause)
  • 加载数据(服务器)
reRender(e)
  • 重新加载html
setColumnWidth(columnparm, value)
  • 调整列宽
setOptions(parms)
  • 重新设置参数(同名方法set)
SubmitEdit(rowParm)
  • 提交编辑
toggle(targetRow)
  • 伸展/收缩节点(树模式)
toggleCol(columnparm, visible)
  • 显示/隐藏列
updateCell(cell, value, rowParm)
  • 更新单元格
updateRow(newRowData, rowDom)
  • 更新行
upgrade(targetRow)
  • 升级(树模式)
例子 
[js]  view plain copy
 
  1.    
  2. &lt;a class="l-button" href="javascript:selectRow(2)"&gt;选择行(3)&lt;/a&gt;   
  3. &lt;a class="l-button" href="javascript:getSelectRow()"&gt;获取选择&lt;/a&gt;   

[js]  view plain copy
 
  1.    
  2. var grid = $("#maingrid").ligerGrid({   
  3. columns: [   
  4. { name: 'id', display: '序号', width: 200 },   
  5. { name: 'name', display: '名称', width: 300 }   
  6. ]   
  7. });   
  8.   
  9. grid.set({ data: { Rows: griddata} });   
  10.   
  11. function selectRow(index) {   
  12. grid.select(index);   
  13. }   
  14. function getSelectRow() {   
  15. var rows = grid.getSelecteds();   
  16. for (var i in rows) {   
  17. alert(rows[i].name);   
  18. }   
  19. }   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




//自定义单元格渲染器 
render : function (record, rowindex, value, column) { 
//this 这里指向grid 
//record 行数据 
//rowindex 行索引 
//value 当前的值,对应record[column.name] 
//column 列信息 
return value; //返回此单元格显示的HTML内容(一般根据value和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 "&lt;div&gt;总数:" + e.count + "&lt;/div&gt;"; 

}, 
//多表头支持 
columns: null 
}, 

转载于:https://www.cnblogs.com/kennyliu/p/3957438.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值