首页 > 代码库 > LigerUI初学篇---使用LigerUI制作简洁清爽的界面

LigerUI初学篇---使用LigerUI制作简洁清爽的界面

2024-08-04 09:15:23   222人阅读

开始在公司实习，呆了刚好五天，按公司要求看了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

先看DEMO,很全面很简单（就是样式用的太多）、

在看API具体使用的时候可以查看参数，两者的界面做的非常的简洁

LigerUI初学篇---使用LigerUI制作简洁清爽的界面


联系
我们