LigerUi中表(Grid)控件的相关属性笔记(持续添加中)
原文地址为: LigerUi中表(Grid)控件的相关属性笔记(持续添加中)
{ 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>"; },
onDblClickRow : function (data, rowindex, rowobj)
{
selectdepartment();
},
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 // 启用 打对勾的多选框
$("#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 | () |
|
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)控件的相关属性笔记(持续添加中)
LigerUi中表(Grid)控件的相关属性笔记(持续添加中)相关推荐
- 控件ListView相关属性 1217
控件ListView相关属性 1217 列 Columns 一般用于详情视图下 列头 ColumnHeader 整行选中 FullRowSelect 项集合 Items 项,是ListView中的内容 ...
- Android控件及其相关属性
属性值: layout_width,layout_height:表示控件本身的宽高. 其属性值wrap_content,表示控件的宽高与空间本身的内容一样大小,match_parent表示控件的宽高与 ...
- 解决Android Studio不提示控件的XML属性
大家好:我国著名数学家华罗庚先生曾经说过:"聪明出于勤奋,天才在于积累."衷心希望各位坚守本心,实现中华民族伟大复兴的中国梦! 一.问题背景 上一篇文章向大家介绍了如何利用WPS使 ...
- WPF 控件专题 Grid 控件详解
1.Grid 介绍 定义由列和行组成的灵活的网格区域,Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列,该对象可包含多个 Children对象 ...
- 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip 原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip inf ...
- Winform中使用控件的Dock属性设计窗体布局,使不随窗体缩放而改变
场景 在新建一个Winform窗体后,拖拽控件设置其布局如下 如果只是单纯的这么设计,我们在运行后,如果对窗口进行缩放就会导致如下 所以我们需要在设计页面布局时对控件进行定位设置. 注: 博客主页: ...
- 【Android】关于Android控件EditText的属性InputType的一些经验
关于Android控件EditText的属性InputType的一些经验 来源:http://blog.163.com/inflexible_simple/blog/static/16769468 ...
- C#控件及常用属性整理
C#控件一览表 前所未有的震撼(太详细了) 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来 ...
- 使用SharpKit构建客户端Grid控件
目录 介绍 实现Grid Grid类 GridRow类 添加一行 从模板创建行元素 使用Grid 实现排序 优化Grid 兴趣点 下载源41.33 KB 下载SharpKit 介绍 此示例代码将向您展 ...
- android button 属性,两行显示数字,前面各有图像,Android_2_常用控件及常用属性
安卓常用控件及其常用属性 TextView android:id 这是唯一地标识控件的ID. android:capitalize 如果设置,指定该TextView中有一个文本输入法 会自动利用什么类 ...
最新文章
- 清华自动驾驶前沿报告!解密六大关键技术,全球人才分布【附下载】| 智东西内参...
- 内存溢出_JVM|03内存溢出实战
- ITK:使用FFT的归一化相关
- Selenium IDE安装和检查获取的控件路径技巧
- 在Firefox 58中,WebAssembly组件性能提升了10倍
- C++PrimerPlus学习——第九章编程练习
- 快捷登录PHP,phpcms 微信快捷登陆
- 萌新程序员找工作该怎么写简历?
- 如何安装配置CKEditor 3.0
- phpMyAdmin安装配置
- python unique函数_每30秒学会一个Python小技巧,GitHub星数4600+
- javascript小技巧:同步服务器时间、同步倒计时
- Puppet自动化运维排错案例
- java图片压缩工具
- arcgis api for js绘制箭头图
- MySQL:Can't create test file XXX.lowe-test
- 电脑文件服务器资源管理器在哪,资源管理器在哪?怎么打开资源管理器?5种方法总有适合你...
- 计算机专业课911,2018年北京物资学院911计算机学科专业基础综合考研复习资料...
- 【华为云-IP资源冻结机制】华为云安全事故冻结服务器IP近1小时【50分钟系统全线不可用】
- 中央空调系统运行原理以及相关设备介绍
热门文章
- 在windows系统上搭建CTS测试环境过程记录
- Factorization Machines 论文翻译
- shader篇-立方体纹理
- SMETA验厂咨询,Sedex验厂工厂的自检流程有哪些
- acme申请证书报错:Please update your account with an email address first.的修复方法
- 2022北京工业互联网安全大赛初赛-wakeup
- 央行二代征信系统即将上线 有哪些变化?
- NSA互联网公开情报收集指南:迷宫中的秘密·下
- elasticsearch分片分配和路由配置
- web安全:QQ号快速登录漏洞及被盗原理