开始在公司实习,呆了刚好五天,按公司要求看了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" ><center><h1>LigerUI基本功能界面</h1></center></div> <div position="left"> </div> <div position="center" title="标题"> </div> <div position="bottom" title="底部"> </div>
到此,布局就搭建了好了,body里只需要一个DIV即可
然后是菜单:
代码:
$("#tree1").ligerTree({ data: [ { 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:是否显示节点连接线 有点小bug });
上面的data是JSON格式,可以从后台的数据获取也可以从本地文件获取,看你怎么发送数据了
<ul id="tree1"> <li><span>节点1</span> <ul> <li url="http://www.baidu.com"><span>节点1.1</span> <ul> <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> <ul> <li><span>节点3.1</span></li> <li><span>节点3.2</span></li> </ul></li> </ul>
将这段代码放在那个left的DIV里,防止data没有数据而显示出来的代码,你也可以直接这样写:
<ul id="tree1"></ul>
紧接着表格(与toolbar一起)
//初始化数据 var jsonObj = {}; jsonObj.Rows= [ { id: 1, name: "林三", sex: "男", birthday: "1989/01/12",score:63.3 }, { id: 2, name: "陈丽", sex: "女", birthday: "1989/01/12", score: 72.2 }, { id: 3, name: "啊群", sex: "男", birthday: "1981/12/12", score: 43.4 }, { id: 4, name: "表帮", sex: "男", birthday: "1983/01/12", score: 73.2 }, { id: 5, name: "陈丽", sex: "女", birthday: "1989/01/12", score: 74.5 }, { id: 6, name: "成钱", sex: "男", birthday: "1989/11/13", score: 73.3 }, { id: 7, name: "都讯", sex: "女", birthday: "1989/04/2", score: 83.2 }, { id: 8, name: "顾玩", sex: "男", birthday: "1999/05/5", score: 93.2 }, { id: 9, name: "林会", sex: "男", birthday: "1969/02/2", score: 73.4 }, { id: 10, name: "王开", sex: "男", birthday: "1989/01/2", score: 33.3 }, { id: 11, name: "刘盈", sex: "女", birthday: "1989/04/2", score: 53.3 }, { id: 12, name: "鄂韵", sex: "男", birthday: "1999/05/5", score: 43.5 }, { id: 13, name: "林豪", sex: "男", birthday: "1969/02/21", score: 83.6 }, { id: 14, name: "王开", sex: "男", birthday: "1989/01/2", score: 93.7 }, { id: 15, name: "鄂酷", sex: "男", birthday: "1999/05/5", score: 61.1 }, { id: 16, name: "林豪", sex: "男", birthday: "1969/02/21", score: 73.3 }, { id: 17, name: "王开", sex: "男", birthday: "1989/01/2", 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, g; 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('请选择行'); return; } 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具体使用的时候可以查看参数,两者的界面做的非常的简洁