jQuery LigerUI 使用教程入门篇
字体：[ ] 类型：转载 时间：
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境
获取最新代码 可以到下载最新代码。 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。 ligerUI是什么 jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等 基础：Resizable、Drag、Tip 导航：Menu、MenuBar、ToolBar 布局：Layout、Tab 表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner 表格：Grid 树形：Tree 窗口：Dialog、MessageBox、Window 回到顶部 如何使用 jQuery LigerUI是基于jQuery而设计的一系列插件集合。基本上每个插件都是相对独立的。但是彼此之间又紧密地关联着，合理地对插件进行组装，实现出现各种复杂的功能。 使用UI可以帮助你快速地创建友好的用户界面。 第一个例子
代码如下: &head& &title&&/title& &link href="/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /& &script src="/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"&&/script& &script src="/lib/ligerUI/js/core/base.js" type="text/javascript"&&/script& &script src="/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"&&/script& &script type="text/javascript"& $(function () { //我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象 var g = $("#txt1").ligerTextBox( { //如果没有输入时,会提示不能为空 nullText: '不能为空' }); /* 如何获取属性 */ //方式一 alert('方式一:' + g.get('disabled')); //方式二 alert('方式二:' + $("#txt1").ligerTextBox('option', 'disabled')); /* 如何设置属性 */ //方式一 g.set('disabled', true); //方式二 $("#txt1").ligerTextBox('option', 'disabled', false); /* 如何调用方法 */ //方式一 g.setDisabled(); //方式二 $("#txt1").ligerTextBox('setEnabled'); /* 如何设置事件 */ //这里给文本框绑定一个改变值的事件 //也可以设置onChangeValue参数 g.bind('changeValue', function (value) { alert(value); }); }); &/script& &/head& &body style="padding:10px"& &input type="text" id="txt1" value="" style="width:200px"/& &/body&
更多的参数和方法的设置可以查看API：/api/ 上面是TextBox的使用范例，其他的插件使用方式类似。 如何使用ligerUI对象 我们应用完插件以后，是返回一个ligerui对象的，可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等，没有及时保存起来。我们可以用其他方式获取。见如下： 保存到一个全局的javascript变量：
$(function () { g = $("#txt1").ligerTextBox(); );
使用$.fn.ligerGetTextBoxManager
代码如下: var g = $("#txt1").ligerGetTextBoxManager ();
使用$.ligerui.get方法
代码如下: var g = $.ligerui.get('txt1');
第三个方式的是使用ligerui对象的id直接获取的，在传入参数没有指定id的情况下，对象的id将会使用html元素的id，如果html元素没有id，将会自动生成一个。所以在这里我们可以用html文本框的id来获取。 如果没有指定html元素的id，可以用第一种方式或者第二种方式。 其实第二种方式可以用第一种方式来替代，实则上ligerText是可以重复调用的，不同的是第二次以后调用都是直接放回ligerui对象。当我们不确定html元素是否已经应用了插件的情况下可以使用第二种方式。 其他插件的命名跟TextBox类同 事件处理 事件处理有两种方式。一种是以参数的形式传入，一种是调用ligerui对象的bind方法。
代码如下: //方式一 var g = $("#txt1").ligerTextBox( { onChangeValue : function(value){alert(value);} }); //方式二 g.bind('changeValue', function (value) { alert(value); });
使用bind方法是没有带”on”的。 事件监听是可以多次绑定的。 对于某些事件，如果函数的返回值是false，那么后面还没有触发的函数将不会再执行 第二种方式(bind)，是V1.1.3使用core机制以后引入的。 方法调用 使用ligerui的接口很方便。只需要调用ligerui对象的方法即可。
代码如下: //这里设置文本框不能编辑 g.setDisabled(); //这里设置文本框可以编辑 g.setEnabled();
也可以使用这种方式
代码如下: $(“#grid”).ligerGrid(‘setEnabled');
至于这个对象有哪些方法，可以查看API 对象的方法是可以扩展的，后面会有一篇ligerui扩展的章节来介绍 第二种方式是在V1.1.4加入的 获取参数值 每一个ligerui对象都会有get方法。可以获取参数值
代码如下: var url = g.get(‘url');
代码如下: var url = $(“#grid”).ligerGrid(‘option','url');
动态设置参数 每一个ligerui对象都会有set方法。用于动态得设置参数。比如改变Grid的url，那么可以这样写：
代码如下: g.set(‘url',url);
代码如下: g.set({url:url});
也可以用插件的方式：
代码如下: $(“#grid”).ligerGrid(‘option','url',url);
第二种方式是允许同时传入多个参数的。 Set方法是所有插件的统一设置属性的接口 Set方法是V1.1.3使用core机制以后引入的。 插件传参的方式是V1.1.4引入的 回到顶部 如何扩展 Ligerui的默认参数、方法都是可以扩展的，这里我们定义了两个入口: $.ligerDefaults和$.ligerMethods。 比如要改变或者扩展Grid的默认参数，可以改变$.ligerDefaults.Grid 默认参数扩展 只需要扩展对象：$.ligerDefaults.{Plugin} 比如要改变表格默认的头部标题：
代码如下: if($.ligerDefaults.Grid) { $.ligerDefaults.Grid.title = "我的表格"; }
本地化支持扩展 只需要扩展对象：$.ligerDefaults.{Plugin}String 比如把表格“加载时”翻译成英文：
代码如下: if($.ligerDefaults.GridString) { $.ligerDefaults.GridString.loadingMessage = "loading..."; }
方法扩展 只需要扩展对象：$. ligerMethos.{Plugin} 这里给Grid ligerui对象增加一个alert方法：
代码如下: $.extend($.ligerMethods.Grid, { alert : function () { //要注意到一点，这里的this就是ligerui对象 var rowdata = this.getSelectedRow(); if (!rowdata) alert('空'); else alert(rowdata.CustomerID); } } ); function show() { //后面就可以这样使用 Var g = $(“#maingrid”).ligerGrid(); g.alert(); }
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具评论- 1086&
&&&&&&&&&&&&&
ligerGrid的功能列表：
1,支持本地数据和服务器数据(配置data或者url)
2,支持排序和分页(包括Javascript排序和分页)
3,支持列的&显示/隐藏&
4,支持明细行(表格内嵌)
5,支持汇总行
6,支持单元格模板
7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)
8,支持树表格(待加入)
8,支持分组(待加入)
二，第一个例子&
引入库文件
如果不需要用到编辑功能，ligerGrid是一个单独的插件，也就是说只需要引入plugins/ligerGrid.js和样式css文件就可以使用(当然必须先引入jQuery)
&&&&&link&href="lib/ligerUI/skins/Aqua/css/ligerui-all.css"&rel="stylesheet"&type="text/css"&/&&&&&&script&src="lib/jquery/jquery-1.3.2.min.js"&type="text/javascript"&&/script&&&&&&script&src="lib/ligerUI/js/plugins/ligerGrid.js"&type="text/javascript"&&/script&
&&div&id="maingrid"&&/div&
准备数据源
var&jsonObj&=&{};jsonObj.Rows&=&[&&&&{&id:&1,&name:&"林三",&sex:&"男",&birthday:&"",score:63.3&},&&&&{&id:&2,&name:&"陈丽",&sex:&"女",&birthday:&"",&score:&72.2&},&&&&{&id:&3,&name:&"啊群",&sex:&"男",&birthday:&"",&score:&43.4&},&&&&{&id:&4,&name:&"表帮",&sex:&"男",&birthday:&"",&score:&73.2&},&&&&{&id:&5,&name:&"陈丽",&sex:&"女",&birthday:&"",&score:&74.5&},&&&&{&id:&6,&name:&"成钱",&sex:&"男",&birthday:&"",&score:&73.3&},&&&&{&id:&7,&name:&"都讯",&sex:&"女",&birthday:&"",&score:&83.2&},&&&&{&id:&8,&name:&"顾玩",&sex:&"男",&birthday:&"",&score:&93.2&},&&&&{&id:&9,&name:&"林会",&sex:&"男",&birthday:&"",&score:&73.4&},&&&&{&id:&10,&name:&"王开",&sex:&"男",&birthday:&"",&score:&33.3&},&&&&{&id:&11,&name:&"刘盈",&sex:&"女",&birthday:&"",&score:&53.3&},&&&&{&id:&12,&name:&"鄂韵",&sex:&"男",&birthday:&"",&score:&43.5&},&&&&{&id:&13,&name:&"林豪",&sex:&"男",&birthday:&"",&score:&83.6&},&&&&{&id:&14,&name:&"王开",&sex:&"男",&birthday:&"",&score:&93.7&},&&&&{&id:&15,&name:&"鄂酷",&sex:&"男",&birthday:&"",&score:&61.1&},&&&&{&id:&16,&name:&"林豪",&sex:&"男",&birthday:&"",&score:&73.3&},&&&&{&id:&17,&name:&"王开",&sex:&"男",&birthday:&"",&score:&41.6&}];
调用ligerGrid
&&&&&&&&&&&&var&columns&=&&&&&&&&&&&&[&&&&&&&&&&&&&&&&{&display:&'主键',&name:&'id',&type:&'int',&mintWidth:&40,&width:&100&},&&&&&&&&&&&&&&&&{&display:&'名字',&name:&'name'&},&&&&&&&&&&&&&&&&{&display:&'性别',&name:&'sex'&},&&&&&&&&&&&&&&&&{&display:&'生日',&name:&'birthday',&type:&'date'&}&&&&&&&&&&&&&];&&&&&&&&&&&&$("#maingrid").ligerGrid({&&&&&&&&&&&&&&&&columns:&columns,&&&&&&&&&&&&&&&&data:&jsonObj&&&&&&&&&&&&});
这样效果就出来了：
三，几个重要的参数
1，标题：配置title和showTitle:true即可
&&&&&&&&&&&&$("#maingrid").ligerGrid({&&&&&&&&&&&&&&&&columns:&columns,&&&&&&&&&&&&&&&&data:&jsonObj,title:'我的标题',showTitle:true&&&&&&&&&&&&});
2，宽度：ligerGrid会根据列自动计算出表格的宽度，当然也可以指定一个数值或者百分比来设置宽度
&&&&&&&&&&&&$("#maingrid").ligerGrid({&&&&&&&&&&&&&&&&columns:&columns,&&&&&&&&&&&&&&&&data:&jsonObj,&width:&'100%'&&&&&&&&&&&&});
3，分页：默认是使用分页的，如果不想使用分页，可以配置&userPager :false
&&&&&&&&&&&&$("#maingrid").ligerGrid({&&&&&&&&&&&&&&&&columns:&columns,&&&&&&&&&&&&&&&&data:&jsonObj,&usePager:false&&&&&&&&&&&&});
4，滚动条：内容有太多的行时会出现滚动体，如果不想显示，可以通过配置isScroll设置是否出现滚动体
&&&&&&&&&&&&$("#maingrid").ligerGrid({&&&&&&&&&&&&&&&&columns:&columns,&&&&&&&&&&&&&&&&data:&jsonObj,&isScroll:false&&&&&&&&&&&&});
5,Column的配置
更多的文档和API后面会渐渐补充,浏览更多的应用请访问
&posted on
阅读(...) 评论()ligerUI&ligerGrid框架使用方法
&%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%&
String path = request.getContextPath();
String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"&
href="&%=basePath%&"&
&title&首页&/title&
&&meta http-equiv="pragma"
content="no-cache"&
&&meta http-equiv="cache-control"
content="no-cache"&
&&meta http-equiv="expires"
content="0"&&&&
&&meta http-equiv="keywords"
content="keyword1,keyword2,keyword3"&
&&meta http-equiv="description"
content="This is my page"&
&&link rel="stylesheet"
type="text/css"
href="scripts/ligerui/ligerUI/skins/Aqua/css/ligerui-all.css"/&
&!--& &link
rel="stylesheet" type="text/css"
href="scripts/ligerui/ligerUI/skins/Gray/css/all.css"/&
&script type="text/javascript"
src="scripts/ligerui/jquery/jquery-1.5.2.min.js"
&&/script&
&script type="text/javascript"
src="scripts/ligerui/ligerUI/js/ligerui.all.js"&&/script&
&script type="text/javascript"
src="scripts/ligerui/json2.js"&&/script&
&script type="text/javascript"&
&&&&&&&&&&&
&&&&&&&&&&&
var accordion =//手风琴
&&&&&&&&&&
&&&&&&&&&&&
$(function ()
&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
$("#layout1").ligerLayout(
&&&&&{&leftWidth:
&&&&&&height:
&&&&&&heightDiff:-34,
&&&&&&space:4,
&&&&&&onHeightChanged:
f_heightChanged
&&&&&&&&&&&&&&&
var height = $(".l-layout-center").height();
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
$("#framecenter").ligerTab({
&&&&&height:
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
$("#accordion1").ligerAccordion({
&&&&&height:
height - 24,
&&&&&speed:
&&&&&&&&&&&&&&&
$(".l-link").hover(
&&&&&function
&&&&&&$(this).addClass("l-link-over");
&&&&&function
&&&&&&$(this).removeClass("l-link-over");
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
tab = $("#framecenter").ligerGetTabManager();
&&&&&&&&&&&&&&&
accordion = $("#accordion1").ligerGetAccordionManager();
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
$("#pageloading").hide();
&&&&&&&&&&&
&&&&&&&&&&&
function f_heightChanged(options)
&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&
tab.addHeight(options.diff);
&&&&&&&&&&&&&&&
if (accordion &&
options.middleHeight - 24 & 0)
&&&&&&&&&&&&&&&&&&&
accordion.setHeight(options.middleHeight - 24);
&&&&&&&&&&&
&&&&&&&&&&&
function f_addTab(tabid,text, url)
&&&&&&&&&&&
&&&&tab.removeAll
();//单任务；
&&&&&&&&&&&&&&&
tab.addTabItem({
&&&&&tabid
&&&&&text:
&&&&return
&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&
&style type="text/css"&
body,html{height:100%;}
padding:0 margin:0;&&
overflow:}&
&&& .l-link{
display: height:26 line-height:26 padding-left:10
text-decoration: color:#333;}
.l-link2{text-decoration: color:
margin-left:2margin-right:2}
.l-layout-top{background:#102A49; color:W}
.l-layout-bottom{ background:#E5EDEF; text-align:}
#pageloading{
&&position:
&&background:white
url('scripts/ligerui/images/loading.gif') no-
&&width:100%;
&&height:100%;
&&z-index:99999;
&&& .l-link{
display: line-height:22 height:22
padding-left:16border:1 margin:4}
.l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;}
&&& .l-winbar{
background:#2B5A76; height:30 position: left:0
bottom:0 width:100%; z-index:99999;}
&&& .space{
color:#E7E7E7;}
.l-topmenu{
&margin:0;
&padding:0;
&height:31
&line-height:31
&background:url('scripts/ligerui/images/top.jpg')
&position:
&border-top:1px solid
.l-topmenu-logo{
&color:#E7E7E7;
&padding-left:35
&line-height:26
&background:url('scripts/ligerui/images/qi.png')
no-repeat 10px 5
.l-topmenu-welcome{& position:
height:24 line-height:24& right:30
top:2color:#070A0C;}
.l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}
style="padding:0background:#EAEEF5;"&&
id="pageloading"&&/div&&
&!-- 加载提示 --&
&div id="topmenu"
class="l-topmenu"&
class="l-topmenu-logo"&后台管理&/div&
&div class="l-topmenu-welcome"&
&a href=""
class="l-link2"&
src="scripts/ligerui/test/images/home01.png"
style="vertical-align:middle"&
&&&&&&&&&百度首页
class="space"&|&/span&
&a href=""
class="l-link2"
target="_blank"&百度新闻&/a&
class="space"&|&/span&
&a href=""
class="l-link2"
target="_blank"&Music&/a&
& &div id="layout1"
style="width:99.2%; margin:0 margin-top:4
&div& id="accordion1"
position="left" title="主要菜单"&
title="应用场景"&
&&&&&&&div
height:7"&&/div&
&a class="l-link" href="#" onclick="return
f_addTab(123,'物品管理','browseGoods2');"
target="_blank"&
src="scripts/ligerui/images/gongWenBao.png"
style="vertical-align:middle"&
class="l-link" href="#" onclick=""
target="_blank"&
&&&&&&&&img
src="scripts/ligerui/images/boy2.png"
style="vertical-align:middle"&
&&&&&&&人员管理
&&&&&&&/a&
&&&&&&/div&&
title="实验室"&
&&&&&&&div
height:7"&&/div&
&&&&&&&&&&&&&&&&&&&&&&&
&a class="l-link" href="#" onclick=""
target="_blank"&表格表单设计器&/a&
&&&&&&&&&&&&&&&&&&&
&div id="framecenter" position="center"
&&&&&&&&&&&
&div tabid="home" title="AAA主页" style="height:300px"
&&&&&&&&&&&&&&&
&iframe frameborder="0" name="home" id="home"
&&&&&&&&&&&
&div& style="height:32
line-height:32 text-align:"&
&&&&&&&&&&&
Copyright & &
&div style="display:none"
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。qdjianghao
阅读(7648)
在开发web信息管理系统时，使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果，而且能够解决大多数浏览器兼容问题，提升开发效率。比较常见的有extjs、easyui、MiniUI、JQuery UI、DWZ、Liger UI、QUI等等，这些框架中有国外的，有国内的，有收费的、也有开源免费的，他们有各自的优势，也有各自的不足。在这里给大家介绍Liger UI框架中一些常见组件的用法。
LigerUI演示地址：
LigerUI API地址：
首先给大家介绍最常用的数据展示组件Grid，使用步骤如下：
1、页面中正确引入样式文件及相应组件
&link href="&%=request.getContextPath()%&/ui/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"&
&script type="text/javascript" src="&%=request.getContextPath()%&/ui/lib/jquery/jquery-1.3.2.min.js"&&/script&
&script type="text/javascript" src="&%=request.getContextPath()%&/ui/lib/ligerUI/js/core/base.js"&&/script&
&script type="text/javascript" src="&%=request.getContextPath()%&/ui/lib/ligerUI/js/plugins/ligerGrid.js"&&/script&
&2、&&在body中添加div
&div id="maingrid"&&/div&
3、&编写js代码
&script type="text/javascript"&
$(function(){
$("#maingrid").ligerGrid({
width:600,
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex"},
{display:"年龄",name:"stuAge"}
发布应用后可查看效果如下：
以上只是grid简单的构建过程，下面看看如何使用grid展示数据
& ligerGrid显示数据采用 json对象，我们只需要给grid的url属性指定一个后台地址，默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下：
{Rows:[{},{}],Total:2};
我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。
以下代码为后台加载数据的Serlvet的关键代码，如要用来构建grid需要的json格式的字符串数据。
resp.setContentType("text/charset=utf-8");
JSONObject obj = new JSONObject();
List&Map&String, String&& list =initStudentData();
obj.put("Rows", list);
obj.put("Total", list.size());
PrintWriter out = resp.getWriter();
out.write(obj.toString());
out.close();
修改js代码如下：
var grid=$("#maingrid").ligerGrid({
width:600,
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex"},
{display:"年龄",name:"stuAge"}
//值为local，数据在客户端进行分页
dataAction:"local",
//数据请求地址
url:"main/studentServlet.action?reqCode=findStudents",
//数据书否分页，默认为true
usePager:true,
pageSize:"8",//分页页面大小
pageSizeOptions:[8,16,32]//可指定每页页面大小
执行效果如下：
在这里要注意，我们在实际应用中采用的分页方式基本上都是后台分页，即在数据库中分页，这里主要是演示，直接采用了客户端分页，默认情况下dataAction的值为server即为服务器分页。
从效果图中我们可以看到，性别列显示的内容是代码，显然不符合要求，ligerGrid为我们提供了单元格渲染器，可以帮助我们完成我们想要的效果。
继续修改grid 列属性如下：
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex",
render:function(rowData){
if(rowData.stuSex=="0"){
return "男";
return "女";
{display:"年龄",name:"stuAge",
render:function(rowData){
if(parseInt(rowData.stuAge)&22){
return "&span style='color:red'&"+rowData.stuAge+"&/span&";
return rowData.stuA
运行程序，效果如下：
由上可知利用render我们可以完成自定义单元格。
当数据大用户多的时候，我们不希望用户打开页面立即显示数据，这样会服务器造成不小的压力，而是当用户输入查询条件并点击查询后，在进行加载数据。
修改js代码如下可以实现根据输入条件加载数据：
var grid=$("#maingrid").ligerGrid({
width:600,
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex",
render:function(rowData){
if(rowData.stuSex=="0"){
return "男";
return "女";
{display:"年龄",name:"stuAge",
render:function(rowData){
if(parseInt(rowData.stuAge)&22){
return "&span style='color:red'&"+rowData.stuAge+"&/span&";
return rowData.stuA
$("#btnLoad").click(function(){
var name=$("#stuname").val();
grid.set({
//值为local，数据在客户端进行分页
dataAction:"local",
//数据请求地址
url:"main/studentServlet.action?reqCode=findStudents",
//数据书否分页，默认为true
usePager:true,
pageSize:"8",//分页页面大小
pageSizeOptions:[8,16,32],//可指定每页页面大小
parms:[{name:"stuname",value:name}]
grid.loadData();
& 运行效果如下：
&源码下载见：
哎呦 不错哦
(非注册用户请填昵称)
(非注册用户请留空)
您还没有登录,请或
访问：25404次
积分：100分
排名：第52名
随笔：10篇
阅读排行榜
评论排行榜
和:和 个好机会 和 韩国结构化结构化结婚h 和结构化韩国脚后跟韩国结构化
熊逗逗:楼主，为什么我还要引入gson-2.2.4.jar呢？
哎呦 不错哦:很好
cai130:总金额计算的不对吗？我试了一下超多1000以上的都不行，求楼主解答
jeason:很好
安于室:很好
:楼主新人求助， 你这个封装好了，怎么使用啊。
我要做个百度的，可是不会LigerUI初学篇---使用LigerUI制作简洁清爽的界面 - 推酷
LigerUI初学篇---使用LigerUI制作简洁清爽的界面
开始在公司实习，呆了刚好五天，按公司要求看了LigerUI,看了一天半的文档！代码这东西光看没有用，是在忍不住，今天下午将脑子里所想的那些功能合在一起，制作了一个我很久以前就像制作的一个后台管理界面如图：
简单的介绍一下：左边是个可隐藏菜单栏，里面的菜单可以根据后台传来的数据动态生成，右边是操作区间，我只是搭了个框架，数据写好，自动形成！这一点我很喜欢，样式什么的都是现成的！！！！表格菜单的“增加”“修改”“删除”都可以根据用户点击的数据进行操作。最下面底部就可以添加一些版权声明什么的，最上面可以添加标志或者其他功能。之前尝试过用纯css来制作，可惜的是，本人css很菜，没有完成之后就放弃了，到现在用了LigerUI很轻松的就制作出来！感叹LigerUI的方便快捷简单！
制作步骤：
1、确定布局；
2、制作菜单树；
3、添加数据Grid；
4、添加Toolbar；
5、对Toolbar的每一项绑定处理事务。
使用最普遍的上中（左右）下布局
$(function() {
$(&#container&).ligerLayout({
leftWidth : 200,
isScroll:true,
isLeftCollapse:false,
allowLeftResize:false,
allowRightResize:false,
allowTopResize:false,
allowBottomResize:false
&div id=&container&&
&div position=&top& &¢er&&h1&LigerUI基本功能界面&/h1&&/center&&/div&
&div position=&left&&
&div position=¢er& title=&标题&&
&div position=&bottom& title=&底部&&
到此，布局就搭建了好了，body里只需要一个DIV即可
然后是菜单：
$(&#tree1&).ligerTree({
{ text: '节点1', children: [
{ text: '节点1.1' },
{ text: '节点1.2' },
{ text: '节点1.3', children: [
{ text: '节点1.3.1' },
{ text: '节点1.3.2' ,children:[
{text:'节点1.3.2.1'},
{text:'节点1.3.2.2'}
{ text: '节点1.4' }
{ text: '节点2' },
{ text: '节点3' },
{ text: '节点4' }
checkbox : false,
parentIcon : 'folder',
childIcon : 'leaf',
isExpand:false
//checkbox: 是否显示复选框
//parentIcon: 非叶节点的图标
//childIcon: 叶节点的图标
//isexpand:是否展开
//treeLine:是否显示节点连接线
上面的data是JSON格式，可以从后台的数据获取也可以从本地文件获取，看你怎么发送数据了
&ul id=&tree1&&
&li&&span&节点1&/span&
&li url=&&&&span&节点1.1&/span&
&li&&span&节点1.1.2&/span&&/li&
&li&&span&节点1.1.2&/span&&/li&
&/ul&&/li&
&/ul&&/li&
&li&&span&节点2&/span&&/li&
&li isexpand=&false&&&span&节点3&/span&
&li&&span&节点3.1&/span&&/li&
&li&&span&节点3.2&/span&&/li&
&/ul&&/li&
将这段代码放在那个left的DIV里，防止data没有数据而显示出来的代码，你也可以直接这样写：
&ul id=&tree1&&&/ul&
紧接着表格（与toolbar一起）
//初始化数据
var jsonObj = {};
jsonObj.Rows= [
{ id: 1, name: &林三&, sex: &男&, birthday: &&,score:63.3 },
{ id: 2, name: &陈丽&, sex: &女&, birthday: &&, score: 72.2 },
{ id: 3, name: &啊群&, sex: &男&, birthday: &&, score: 43.4 },
{ id: 4, name: &表帮&, sex: &男&, birthday: &&, score: 73.2 },
{ id: 5, name: &陈丽&, sex: &女&, birthday: &&, score: 74.5 },
{ id: 6, name: &成钱&, sex: &男&, birthday: &&, score: 73.3 },
{ id: 7, name: &都讯&, sex: &女&, birthday: &&, score: 83.2 },
{ id: 8, name: &顾玩&, sex: &男&, birthday: &&, score: 93.2 },
{ id: 9, name: &林会&, sex: &男&, birthday: &&, score: 73.4 },
{ id: 10, name: &王开&, sex: &男&, birthday: &&, score: 33.3 },
{ id: 11, name: &刘盈&, sex: &女&, birthday: &&, score: 53.3 },
{ id: 12, name: &鄂韵&, sex: &男&, birthday: &&, score: 43.5 },
{ id: 13, name: &林豪&, sex: &男&, birthday: &&, score: 83.6 },
{ id: 14, name: &王开&, sex: &男&, birthday: &&, score: 93.7 },
{ id: 15, name: &鄂酷&, sex: &男&, birthday: &&, score: 61.1 },
{ id: 16, name: &林豪&, sex: &男&, birthday: &&, score: 73.3 },
{ id: 17, name: &王开&, sex: &男&, birthday: &&, score: 41.6 }
var columns =
{ display: '主键', name: 'id', type: 'int', mintWidth: 40, width: 100 },
{ display: '名字', name: 'name' },
{ display: '性别', name: 'sex' },
{ display: '生日', name: 'birthday', type: 'date' }
//初始化布局与表格
$(f_initGrid);
var manager,
function f_initGrid() {
g = manager = $(&#maingrid&).ligerGrid({
checkbox: true,
columns : columns,
data : jsonObj,
rownumbers:true,
//添加toolbar
toolbar: { items: [
{ text: '增加', click: f_open, icon: 'add' },
{ line: true },
{ text: '修改', click: getSelected, icon: 'modify' },
{ line: true },
{ text: '删除', click: itemclick, icon: 'delete' }
width: '100%',
height: 478//注意使用“%”的区别
function getSelected()
var gmanager = $(&#maingrid&).ligerGetGridManager();
var row = gmanager.getSelectedRow();
if (!row) { alert('请选择行'); }
alert(JSON.stringify(row));
function itemclick(item)
alert(item.text);
上面的data依然是JSON格式的数据，这里要注意
jsonObj.Rows和下面调用的jsonObj
同样的，只需要在centen的DIV里添加代码、
&div id=&maingrid&&&/div&
表格就充满了界面
因为我用的是Linux系统制作的，项目结构和windows的不一样
完整的代码是放在LigerLayout下面的index.jsp页面中大家可以下载看一看
顺便说一下LigerUI的官方Demo与API
先看DEMO,很全面很简单（就是样式用的太多）、
在看API具体使用的时候可以查看参数，两者的界面做的非常的简洁
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致
