LigerUi中表(Grid)控件的相关属性笔记
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'}, // 【选择框】
- 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:
- <span style="font-size:14px; line-height:25px"> </span> {
- <span style="font-size:14px; line-height:25px"> </span> display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
- <span style="font-size:14px; line-height:25px"> </span> name: 'name',
- <span style="font-size:14px; line-height:25px"> </span> align: 'left'
- <span style="font-size:14px; line-height:25px"> </span> },
或者使用headerRender:
- <span style="font-size:14px; line-height:25px"> </span>//表头内容自定义函数
- <span style="font-size:14px; line-height:25px"> </span>headerRender: function (column)
- <span style="font-size:14px; line-height:25px"> </span>{
- <span style="font-size:14px; line-height:25px"> </span> return "<b>" + column.display + "</b>";
- <span style="font-size:14px; line-height:25px"> </span>},
{
selectdepartment();
},
url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label', sortName: 'Sort',
checkbox: false // 启用 打对勾的多选框
- <pre><span style="font-size:14px;">$("#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%'
- });</span></pre><span style="font-size:18px"><br>
- </span>
- <pre></pre>
- <pre></pre>
- <span style="font-size:14px;">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);
- }</span>
- 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" onclick="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="#" onclick="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 | () |
|
getCheckedRows | () |
|
getChidren | (rowParm) |
|
getColumn | (columnpam) |
|
getColumns | (columnLevel) |
|
getColumnType | (columnname) |
|
getData | (status, removeStatus) |
|
getDeleted | () |
|
getParent | (rowParm) |
|
getRowObj | (rowParm) |
|
getSelected | () |
|
getSelectedRow | () |
|
getSelectedRowObj | () |
|
getSelectedRowObjs | () |
|
getSelectedRows | () |
|
getSelecteds | () |
|
getUpdated | () |
|
hasChildren | (rowParm) |
|
isLeaf | (rowParm) |
|
isTotalSummary | () |
|
loadData | (loadDataParm) |
|
loadServerData | (param, clause) |
|
reRender | (e) |
|
setColumnWidth | (columnparm, value) |
|
setOptions | (parms) |
|
SubmitEdit | (rowParm) |
|
toggle | (targetRow) |
|
toggleCol | (columnparm, visible) |
|
updateCell | (cell, value, rowParm) |
|
updateRow | (newRowData, rowDom) |
|
upgrade | (targetRow) |
|
例子
- <a class="l-button" href="javascript:selectRow(2)">选择行(3)</a>
- <a class="l-button" href="javascript:getSelectRow()">获取选择</a>
- 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 "<div>总数:" + e.count + "</div>";
}
},
//多表头支持
columns: null
},
LigerUi中表(Grid)控件的相关属性笔记的更多相关文章
- Andriod常用控件介绍&相关属性(初学方便查询)
一.TextView(显示控件) android:id(给当前控件定义唯一的标识符)——示例:android:id = "@+id/text_view" android:layou ...
- dev设置子窗体的初始位置,grid控件表头的属性设置
当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent ...
- silverlight的Datagrid控件列绑定属性笔记
<data:DataGridTemplateColumn Header="给作者留言"> <data:DataGridTemplateColumn.CellTem ...
- 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作
上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...
- 完全使用一组 DSL 来操作 Grid 控件
最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...
- WPF平台Grid控件性能比较
WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...
- FineUI Grid控件高度自适应
引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...
- FineUI Grid控件右键菜单的实现
FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
随机推荐
- FoundToday for HK 技术支持
FoundToday for HK 技术支持 技术支持网址:有问题或建议请留言. 邮箱地址: swvrwafet@zoho.com Program design & system cons ...
- thinkphp5 join使用注意
A表有id,name,time等字段, B表有id,type,uid,email,address等字段. A表中的id和B表中的uid对应. Db::table(A表)->alias('a') ...
- OnclickListener
https://developer.android.com/reference/android/view/View.OnClickListener.html# https://blog.csdn.ne ...
- 零散的JS和node.js小知识
JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...
- Java安装及配置开发环境
这篇文章里将记录安装Java及配置Java环境的一些步骤,以及基于Java的可扩展开发平台Eclipse的Android开发环境的配置. 准备工具 1.JDK下载 下载地址 关于左侧列栏的Java S ...
- 使用nsenter工具进入Docker容器
查看本机装没有nsenter whereis nsenter或者whatis nsenter 未安装先安装,网上有很多这样的脚本 vi nsenter.sh #!/bin/bashcurl https ...
- 在startup中遍历程序集
在aspnetcore中是可以使用AppDomain的,如:在ConfigureServices中,可以使用以下代码获取项目引用的所有dll, var assemblies = AppDomain.C ...
- Java面向对象_对象一一对应关系和this关键字
一.打个比方,一个人有一个身份证号,一个身份证号对应一个人.一个英雄对应一把武器,一把武器对应一个英雄.生活中很多对象都存在一一对应关系,那么一一对应关系在代码中是如何实现的呢?举个例子,英雄和武器一 ...
- (转)Linux命令学习总结:dos2unix - unix2dos
Linux命令学习总结:dos2unix - unix2dos 命令简介: 原文:http://www.cnblogs.com/kerrycode/p/5077969.html dos2unix是将W ...
- ElasticSearch2.2.0安装(win7)
ElasticSearch2.2.0必须在jdk1.7上才可以启动起来哦. 一.ElasticSearch2.2.0安装 1.下载ElasticSearch2.2.0安装包 https://downl ...