http://blog.csdn.net/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'},  // 【选择框】

  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:

  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:

  1. <span style="font-size:14px; line-height:25px">            </span>//表头内容自定义函数
  2. <span style="font-size:14px; line-height:25px">            </span>headerRender: function (column)
  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>

  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>
 
  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>
  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) 取消选择行事件

例子

  1. var grid = $("#maingrid").ligerGrid({
  2. columns:
  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. //行索引 第几行,从0开始
  16. alert(rowdata.name);
  17. });

方法

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

例子

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

//自定义单元格渲染器 
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)控件的相关属性笔记的更多相关文章

  1. Andriod常用控件介绍&相关属性(初学方便查询)

    一.TextView(显示控件) android:id(给当前控件定义唯一的标识符)——示例:android:id = "@+id/text_view" android:layou ...

  2. dev设置子窗体的初始位置,grid控件表头的属性设置

    当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent ...

  3. silverlight的Datagrid控件列绑定属性笔记

    <data:DataGridTemplateColumn Header="给作者留言"> <data:DataGridTemplateColumn.CellTem ...

  4. 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作

    上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...

  5. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

  6. WPF平台Grid控件性能比较

    WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...

  7. FineUI Grid控件高度自适应

    引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...

  8. FineUI Grid控件右键菜单的实现

    FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...

  9. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

随机推荐

  1. FoundToday for HK 技术支持

    FoundToday for HK 技术支持   技术支持网址:有问题或建议请留言. 邮箱地址: swvrwafet@zoho.com Program design & system cons ...

  2. thinkphp5 join使用注意

    A表有id,name,time等字段, B表有id,type,uid,email,address等字段. A表中的id和B表中的uid对应. Db::table(A表)->alias('a') ...

  3. OnclickListener

    https://developer.android.com/reference/android/view/View.OnClickListener.html# https://blog.csdn.ne ...

  4. 零散的JS和node.js小知识

    JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...

  5. Java安装及配置开发环境

    这篇文章里将记录安装Java及配置Java环境的一些步骤,以及基于Java的可扩展开发平台Eclipse的Android开发环境的配置. 准备工具 1.JDK下载 下载地址 关于左侧列栏的Java S ...

  6. 使用nsenter工具进入Docker容器

    查看本机装没有nsenter whereis nsenter或者whatis nsenter 未安装先安装,网上有很多这样的脚本 vi nsenter.sh #!/bin/bashcurl https ...

  7. 在startup中遍历程序集

    在aspnetcore中是可以使用AppDomain的,如:在ConfigureServices中,可以使用以下代码获取项目引用的所有dll, var assemblies = AppDomain.C ...

  8. Java面向对象_对象一一对应关系和this关键字

    一.打个比方,一个人有一个身份证号,一个身份证号对应一个人.一个英雄对应一把武器,一把武器对应一个英雄.生活中很多对象都存在一一对应关系,那么一一对应关系在代码中是如何实现的呢?举个例子,英雄和武器一 ...

  9. (转)Linux命令学习总结:dos2unix - unix2dos

    Linux命令学习总结:dos2unix - unix2dos 命令简介: 原文:http://www.cnblogs.com/kerrycode/p/5077969.html dos2unix是将W ...

  10. ElasticSearch2.2.0安装(win7)

    ElasticSearch2.2.0必须在jdk1.7上才可以启动起来哦. 一.ElasticSearch2.2.0安装 1.下载ElasticSearch2.2.0安装包 https://downl ...