jQuery ligerUI谁用过请教一些问题_jquery吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：33,349贴子：
jQuery ligerUI谁用过请教一些问题收藏
这是条件查询部分，如果我想在查询条件再加一个字段为什么没有效果，就是没有按我新加的那个条件进行查询。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或第一个例子
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。
支持本地数据和服务器数据(配置data或者url)支持排序和分页(包括Javascript排序和分页)支持列的“显示/隐藏”支持多表头支持固定列支持明细行支持汇总行支持单元格模板支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)支持树表格支持分组支持行移位、表头拖拽(新加入)
&首先引入基本的css和js文件
&link href=&/lib/ligerUI/skins/Aqua/css/ligerui-all.css& rel=&stylesheet& type=&text/css& /&
&script src=&/lib/jquery/jquery-1.5.2.min.js& type=&text/javascript&&&/script&
&script src=&/lib/ligerUI/js/ligerui.min.js& type=&text/javascript&&&/script&
然后就可以使用liger Grid了
&div id=&maingrid&&&/div&
&script type=&text/javascript&&
var griddata = [
{ id: '01', name: '部门01' },
{ id: '02', name: '部门02' },
{ id: '03', name: '部门03' },
{ id: '04', name: '部门04' },
{ id: '05', name: '部门05' },
{ id: '06', name: '部门06' },
{ id: '07', name: '部门07' }
var grid = $(&#maingrid&).ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
data: { Rows: griddata }
20 &/script&
表格数据结构
表格数据有两个属性,一个是Rows，一个是Total。其中Rows是一个数据数组，Total是记录的总数。
实则是Total在使用本地数据的时候是不需要提供的。我们使用本地数据的格式可以这样：
{ id: '01', name: '部门01' },
{ id: '02', name: '部门02' },
{ id: '03', name: '部门03' },
{ id: '04', name: '部门04' },
{ id: '05', name: '部门05' },
{ id: '06', name: '部门06' },
{ id: '07', name: '部门07' }
id、name都是记录的属性,这里是可以任意自定义的,而在配置columns的时候，并不一定要配置相应的列，只需要配置相应显示的列。在后续的操作中，这些属性都可以取得。比如方法getSelected()。自定义单元格函数render。
树形表格数据结构
&树形结构师在表格数据的基础上多了一个children的参数，比如：
{ id: '01', name: '部门01', children: [
{ id: '0101', name: '部门0101' },
{ id: '0102', name: '部门0102' },
{ id: '0103', name: '部门0103' }
{ id: '02', name: '部门02' },
{ id: '03', name: '部门03' },
{ id: '04', name: '部门04' },
{ id: '05', name: '部门05' },
{ id: '06', name: '部门06' },
{ id: '07', name: '部门07' }
两种绑定数据的方式
ligerGrid绑定数据有两种方式，一是使用本地数据，一是使用服务器数据。
在第一个例子中，我们配置了data参数，这种方式是本地方式。另一种方式是配置url参数，使用远程数据。
配置column
&表格显示了多少个列,列宽，列单元格要显示的内容都是由columns属性配置，下面是column的配置参数：
display: '序号',
//表头列显示的文本,支持html
//表头内容自定义函数
headerRender: function (column) {
return &&b&& + column.display + &&/b&&;
name: 'id',
//单元格映射的行数据属性
align: 'center',
//单元格内容对齐方式:left/center/right
hide: false,
//是否隐藏
width: 100,
//列的宽度
minWidth: 50,
//列的最小宽度
isSort: true,
//是否允许此列排序,默认为允许排序
isAllowHide: true,
//是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】
type: 'string',
//类型,用于排序
//自定义单元格渲染器
render : function (record, rowindex, value, column) {
这里指向grid
//rowindex 行索引
当前的值，对应record[column.name]
//返回此单元格显示的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&&;
//单元格编辑器
type: 'text'
//多表头支持
columns: null
表格的列提供了很完整的接口可以扩展。无论是内容单元格或者是表头单元格都可以对内容、布局、大小进行自定义。
自定义表头
比如表头，我们可以把display直接设置一段html:
display: '&a href=&javascript:void(0)&&部门&/a&', //表头列显示的文本,支持html
name: 'name',
align: 'left'
或者使用headerRender：
1 //表头内容自定义函数
2 headerRender: function (column) {
return &&b&& + column.display + &&/b&&;
自定义单元格
&column的name是定义单元格链接到 行数据 哪一个属性。比如说上面例子的第一行，把name配置为id，那么显示出来应该就是 &01&，如果配置成name，那么显示出来就是 &部门01&。还有align参数，是确定单元格的对齐方式。
如果没有配置render，那么单元格显示的内容将由name确定。
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
上面介绍的是单元格的默认显示方式。除了这种方式，还可以用格式器和自定义函数。
单元格内容的显示规则：
1，如果配置了render，使用render
2，如果column的type参数扩展了对应的格式化器，那么使用格式化器进行渲染。比如定义了货币格式的格式化器
3，最后才是使用默认显示方式
格式化器
&通过扩展$.ligerDefaults.Grid.formatters['columntype']来实现，columntype是column配置的type参数。比如现在要格式化一个货币格式的：
1 $.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 当前的值
//column 列信息
if (!num) return &$0.00&;
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num))
num = &0.00&;
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents & 10)
cents = &0& +
for (var i = 0; i & Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3));
return &$& + (((sign) ? '' : '-') + '' + num + '.' + cents);
&这样只要column的type配置为currency。都会使用这个函数来自定义单元格内容
1 { display: '单价', name: 'UnitPrice', align: 'right' ,type:'currency' }
自定义单元格函数
&自定义单元格函数是指配置column的render。我们可以组织任意的html。
1 var grid = $(&#maingrid&).ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 100,
render: function (record, rowindex, value, column) {
这里指向grid
//rowindex 行索引
当前的值，对应record[column.name]
return &&a href='edit.htm?id=& + value + &'&编辑&/a&&;
{ name: 'id', display: '序号', width: 120,
render: function (record, rowindex, value, column) {
return '&input type=&button& value=&Add&/&&input type=&button& value=&Edit&/&&input type=&button& value=&Delete&/&';
{ name: 'name', display: '名称', width: 300 }
data: { Rows: griddata }
单元格编辑器
所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors，比如
1 editor: { type: 'spinner' }
将会使用$.ligerDefaults.Grid.editors['spinner'] 进行创建编辑器进行构建。
ligerGrid内置提供了 复选框、文本框、日期、数字调整器、下拉框 等编辑器。
&column的参数很多,这里不作一一列举，只介绍了几个常用的参数
更多的可以查看api:&
排序和分页
&排序和分页也有两种方式。一种是本地排序和分页。一种是服务器排序和分页。这里只介绍本地的方式。
默认的情况。是启用排序和分页的。如果要取消分页功能，如下：
1 usePager: false
事件和方法
增加行后事件
开始编辑后事件
(column, newwidth)
改变列宽度事件
显示完数据事件
提交编辑 事件
(column, newwidth)
验证 改变列宽度 是否通过
(checked, grid element)
选择前事件，可以通过return false阻止操作(复选框 全选/全不选)
编辑前事件
显示数据前事件，可以通过reutrn false阻止操作
验证编辑器结果是否通过
验证 开始编辑 是否通过
取消编辑 事件
改变排序事件
(checked, grid element)
选择事件(复选框 全选/全不选)
(checked, rowdata, rowindex, rowDomElement)
选择事件(复选框)
(rowdata, rowindex, rowDomElement)
双击行事件
拖动列事件
加载完函数
加载时函数
刷新事件，可以通过return false来阻止操作
(rowdata, rowindex, rowDomElement)
选择行事件
提交前事件
第一页，可以通过return false来阻止操作
切换列事件
最后一页，可以通过return false来阻止操作
下一页，可以通过return false来阻止操作
上一页，可以通过return false来阻止操作
(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);
增加一个编辑行
(rowdata, rowParm, isBefore, parentRow)
(rowdataArr)
一次性增加多行
(rowData, targetRow, nearRow, isBefore)
附加新行(树模式)
进入编辑状态
(columnparm, headerText)
改变表头文本
(columnName, sortOrder)
(targetRow)
收缩(树模式)
删除选择的行
(targetRow)
降级(树模式)
(targetRow)
展开(树模式)
格式化数据,删除系统字段
获取新增的数据
获取选中的行 DOM对象集合
获取选中的行数据(复选框)
获取子节点数据(树模式)
(columnpam)
获取列信息
(columnLevel)
获取指定层级的Columns
(columnname)
根据列名获取列类型
(status, removeStatus)
获取删除过的数据
获取父节点数据(树模式)
行DOM转换为行数据
获取选中的行数据(同getSelectedRow)
获取选中的行数据
获取选中的行 DOM对象
获取选中的行 DOM对象集合
获取选中的行数据集合(支持Ctrl多选)
获取选中的行数据集合(支持Ctrl多选)(同getSelectedRows)
获取修改过的数据
是否包括子节点(树模式)
是否叶节点(树模式)
是否包含汇总
(loadDataParm)
(param, clause)
加载数据(服务器)
重新加载html
(columnparm, value)
重新设置参数(同名方法set)
(targetRow)
伸展/收缩节点(树模式)
(columnparm, visible)
显示/隐藏列
(cell, value, rowParm)
更新单元格
(newRowData, rowDom)
(targetRow)
升级(树模式)
&a class=&l-button& href=&javascript:selectRow(2)&&选择行(3)&/a&
&a class=&l-button& href=&javascript:getSelectRow()&&获取选择&/a&
1 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);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：84456次
积分：2287
积分：2287
排名：第12569名
原创：98篇
转载：464篇
(32)(45)(28)(15)(75)(31)(37)(39)(20)(19)(32)(11)(12)(43)(12)(30)(13)(37)(21)ligerUI布局时,Center中的Tab高度太小问题解决_Javascript教程_
ligerUI布局时,Center中的Tab高度太小问题解决
来源：人气：315
1.0 引用的js,
&link href="/Content/scrts/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /&
&link href="/Content/scripts/ligerUI/skins/ligerui-icons.css" rel="stylesheet" /&
&script src="~/Scripts/jquery-1.8.2.js"&&/script&
&script src="/Content/scripts/ligerUI/js/ligerui.all.js"&&/script&
2.0 用js代码设置ligerUI布局和Tab高度
$(function () {
$("#layout1").ligerLayout({ leftWidth: 200, topHeight: 80 });
$("#accordion1").ligerAccordion({ height: 300 });
//重要的代码,设置新增加的tab的高度等于center div的高度.
var height = $(".l-layout-center").height();
tab = $("#tab1").ligerTab({ height: height });
//可以动态增加一个tab标签页,但是元素有哪些
function addTab(url, text, tabid) {
tab.addTabItem({ url: url, text: text, tabid: tabid });
3.0 简单的设置样式
&style type="text/css"&
body { padding: 10px; margin: 0; }
#layout1 { width: 100%; margin: 40px; height: 400px; margin: 0; padding: 0; }
#accordion1 { height: 270px; }
h4 { margin: 20px; }
#accordion1 ul li { font-size: 14px; margin-left: 15px; }
a { color: black; text-decoration: none; }
a:hover { color: #ff6a00; }
4.0 body中的内容
&body style="padding:10px"&
&div id="layout1"&
&div position="left" title="功能列表"&
&div id="accordion1"&
&div title="项目管理"&
&li&&a href="script:void(0)" onclick="addTab( '','指定队伍',
1 )"&指定队伍&/a&&/li&
&li&&a href=":void(0)" onclick="addTab( '','查看项目',
2 )"&查看项目&/a&&/li&
&div title="用户管理"&
&li&&a href="javascript:void(0)" onclick="addTab('','用户审核', 3 )"&用户审核&/a& &/li&
&li&&a href="javascript:void(0)" onclick="addTab( '','查看用户', 4 )"&查看用户&/a&&/li&
&div title="其他" style="padding:10px"&
&div position="center" id="tab1"&
&div position="top" style="line-height: 80"&
&span style="font-size: 28font-weight:font-family:楷体;"&超级管理员后台&/span&
&span&&a href='@Url.Action("LoginOut","Admin")' style="margin-right: 20font-size: 18color: #0000float:"&退出&/a&&/span&
&div position="bottom"&&/div&
优质网站模板}