原文地址为: LigerUi中表(Grid)控件的相关属性笔记(持续添加中)

// ========================================= 【每一项的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'},  // 【选择框】

              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:

             {
                 display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
                 name: 'name',
                 align: 'left'
             },

或者使用headerRender:

            //表头内容自定义函数
            headerRender: function (column) 
            {
               return "<b>" + column.display + "</b>";
            }, 

// =======================================================【表 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>
$("#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' }], dataAction: 'server',pageSize:30,url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID', width: '100%',height:'100%'});

var grid;$(function (){grid = $("#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: 'City' }], dataAction: 'server', pageSize: 30,url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',width: '100%', height: '100%',onCheckRow: function (checked,data,rowindex,rowobj){checked && $.ligerDialog.alert('选择的是'+data.CustomerID);}}); $("#pageloading").hide();});function getCheckedData()     // 获取选择的复选框记录{var rows = grid.getCheckedRows();var str = "";$(rows).each(function (){str += this.CustomerID + ",";});$.ligerDialog.alert('选择的是' + str);}

var jsonObj = {};jsonObj.Rows = [{ id: 3, name: "林三", sex: "男", birthday: "1989-01-12" },{ id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },{ id: 33, name: "啊三", sex: "男", birthday: "1981-12-12" },{ id: 34, name: "表三", sex: "男", birthday: "1983-01-12" },{ id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },{ id: 33, name: "成三", sex: "男", birthday: "1989-11-23" },{ id: 34, name: "都三", sex: "女", birthday: "1989-04-12" },{ id: 324, name: "鄂三", sex: "男", birthday: "1999-05-15" },{ id: 344, name: "林三", sex: "男", birthday: "1969-02-21" },{ id: 1, name: "王开", sex: "男", birthday: "1989-01-12" }];$("#maingrid").ligerGrid({columns: [{ display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,render: function (row){var html = '<input type="checkbox" rowid="' + row.id + '">';return html;},headerRender: function (column){var html = '<input type="checkbox" οnclick="selectAll(this)">';return html;}},{ display: '主键', name: 'id', width: 50, type: 'int' },{ display: '名字', name: 'name', width: 50 },{ display: '性别', name: 'sex', width: 50, isSort: false},{ display: '生日', name: 'birthday', type: 'date', width: 100 },{display: '模板列', isAllowHide: false,render: function (row){var html = '<a href="#" οnclick="onedit(' + row.id + ')">编辑</a>';return html;}}],width:'100%',data: jsonObj,url: "../Default.aspx", pkName: 'id',pageSizeOptions: [5, 10, 15, 20],onAfterShowData: function (grid){if ($.fn.ligerCheckBox)$(".l-grid-body input:checkbox,.l-grid-hd-cell input:checkbox", grid).ligerCheckBox({ css: { marginTop: 3} })}});

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

  事件

事件名 参数 描述
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) 取消选择行事件

例子

 var grid = $("#maingrid").ligerGrid({ columns: 
    [ { name: 'id', display: '序号', width: 200 }, { name: 'name', display: '名称', width: 300 } ],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行记录 对于数据行
//行索引 第几行,从0开始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 这里的this都是指向grid //行记录 对于数据行
//行索引 第几行,从0开始
alert(rowdata.name);
});

方法

方法 参数 描述
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)
  • 升级(树模式)

例子

&lt;a class="l-button" href="javascript:selectRow(2)"&gt;选择行(3)&lt;/a&gt;
&lt;a class="l-button" href="javascript:getSelectRow()"&gt;获取选择&lt;/a&gt;
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
]
}); grid.set({ data: { Rows: griddata} }); function selectRow(index) {
grid.select(index);
}
function getSelectRow() {
var rows = grid.getSelecteds();
for (var i in rows) {
alert(rows[i].name);
}
} 

//自定义单元格渲染器 
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 
},

转载请注明本文地址: LigerUi中表(Grid)控件的相关属性笔记(持续添加中)

LigerUi中表(Grid)控件的相关属性笔记(持续添加中)相关推荐

  1. 控件ListView相关属性 1217

    控件ListView相关属性 1217 列 Columns 一般用于详情视图下 列头 ColumnHeader 整行选中 FullRowSelect 项集合 Items 项,是ListView中的内容 ...

  2. Android控件及其相关属性

    属性值: layout_width,layout_height:表示控件本身的宽高. 其属性值wrap_content,表示控件的宽高与空间本身的内容一样大小,match_parent表示控件的宽高与 ...

  3. 解决Android Studio不提示控件的XML属性

    大家好:我国著名数学家华罗庚先生曾经说过:"聪明出于勤奋,天才在于积累."衷心希望各位坚守本心,实现中华民族伟大复兴的中国梦! 一.问题背景 上一篇文章向大家介绍了如何利用WPS使 ...

  4. WPF 控件专题 Grid 控件详解

    1.Grid 介绍 定义由列和行组成的灵活的网格区域,Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列,该对象可包含多个 Children对象 ...

  5. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip 原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip inf ...

  6. Winform中使用控件的Dock属性设计窗体布局,使不随窗体缩放而改变

    场景 在新建一个Winform窗体后,拖拽控件设置其布局如下 如果只是单纯的这么设计,我们在运行后,如果对窗口进行缩放就会导致如下 所以我们需要在设计页面布局时对控件进行定位设置. 注: 博客主页: ...

  7. 【Android】关于Android控件EditText的属性InputType的一些经验

    关于Android控件EditText的属性InputType的一些经验   来源:http://blog.163.com/inflexible_simple/blog/static/16769468 ...

  8. C#控件及常用属性整理

    C#控件一览表 前所未有的震撼(太详细了) 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来 ...

  9. 使用SharpKit构建客户端Grid控件

    目录 介绍 实现Grid Grid类 GridRow类 添加一行 从模板创建行元素 使用Grid 实现排序 优化Grid 兴趣点 下载源41.33 KB 下载SharpKit 介绍 此示例代码将向您展 ...

  10. android button 属性,两行显示数字,前面各有图像,Android_2_常用控件及常用属性

    安卓常用控件及其常用属性 TextView android:id 这是唯一地标识控件的ID. android:capitalize 如果设置,指定该TextView中有一个文本输入法 会自动利用什么类 ...

最新文章

  1. 清华自动驾驶前沿报告!解密六大关键技术,全球人才分布【附下载】| 智东西内参...
  2. 内存溢出_JVM|03内存溢出实战
  3. ITK:使用FFT的归一化相关
  4. Selenium IDE安装和检查获取的控件路径技巧
  5. 在Firefox 58中,WebAssembly组件性能提升了10倍
  6. C++PrimerPlus学习——第九章编程练习
  7. 快捷登录PHP,phpcms 微信快捷登陆
  8. 萌新程序员找工作该怎么写简历?
  9. 如何安装配置CKEditor 3.0
  10. phpMyAdmin安装配置
  11. python unique函数_每30秒学会一个Python小技巧,GitHub星数4600+
  12. javascript小技巧:同步服务器时间、同步倒计时
  13. Puppet自动化运维排错案例
  14. java图片压缩工具
  15. arcgis api for js绘制箭头图
  16. MySQL:Can't create test file XXX.lowe-test
  17. 电脑文件服务器资源管理器在哪,资源管理器在哪?怎么打开资源管理器?5种方法总有适合你...
  18. 计算机专业课911,2018年北京物资学院911计算机学科专业基础综合考研复习资料...
  19. 【华为云-IP资源冻结机制】华为云安全事故冻结服务器IP近1小时【50分钟系统全线不可用】
  20. 中央空调系统运行原理以及相关设备介绍

热门文章

  1. 在windows系统上搭建CTS测试环境过程记录
  2. Factorization Machines 论文翻译
  3. shader篇-立方体纹理
  4. SMETA验厂咨询,Sedex验厂工厂的自检流程有哪些
  5. acme申请证书报错:Please update your account with an email address first.的修复方法
  6. 2022北京工业互联网安全大赛初赛-wakeup
  7. 央行二代征信系统即将上线 有哪些变化?
  8. NSA互联网公开情报收集指南:迷宫中的秘密·下
  9. elasticsearch分片分配和路由配置
  10. web安全:QQ号快速登录漏洞及被盗原理