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 ...
随机推荐
- Multi-catch parameters are not allowed for source level below 1.7 报错处理
有可能是你项目右键build-path里面的这个东西 在项目上右键properties->project Facets->修改右侧的version 保持一致 还有一个就是Window里面 ...
- thinkphp5判断移动或pc端访问并调用不同模块
把下面的代码放在app\common.php公共方法那里. function isMobile() { if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { ret ...
- Django反向解析与分组命名
1.图书管理系统中使用分组或命名分组.URL的命名和反向解析: 2.删除功能三合一: urls.py文件 from app_book import views urlpatterns = [ url( ...
- C++ | char* 在类中实践笔记
在C++中,当类中定义有char * 变量时,在传参,构造函数,复制构造函数如何创建及赋值,来一个简单的例子就明了: #include<iostream> #include<stri ...
- 客户端发送http
package com.scok; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStr ...
- Gym 101047M Removing coins in Kem Kadrãn
给定一个序列,只能拿走D,隔壁的会翻转,问能否全部拿走. 注意到如果能拿走的话,拿D的顺序是没关系的.模拟即可 #include <cstdio> #include <cstdlib ...
- Json 解析Json
1.把LitJson导入到项目里面; 2.建一个下面的脚本,不挂在游戏对象上; 3.新建下面一个脚本,挂在相机上. using System.Collections; using System.Col ...
- 经典PHP笔试题
1.考虑如下脚本.标记处应该添加什么代码才能让脚本输出字符串php? $alpha = 'abcdefghijklmnopqrstuvwxyz'; $letters = array(15, 7, 15 ...
- 查看Apache信息以用户htdoc位置
查看Apache的相关信息:httpd -V 再从基本信息中取得DocumentRoot位置 less /etc/httpd/httpd.conf中查找DocumentRoot,即有静态文件存放的位置 ...
- C#数据库(MySQL)帮助类
using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Configura ...