python后端easyui前端打造运维平台

bootstrap是很好,但是有时候界面需要用ui来打造,一说ui大家说先会想到extjs,这东西我也细心的学过,但是这东西不好学,麻烦,需要你有扎实的javascripts技能。


我属于半调子的jquery使用者,也做了几年的项目,现在想要的效果,也都能搞出来。 easyui 是在jquery上做的开发,所以学习起来比较的容易,可以和一些jquery的组建更好的融合在一起。


这里找了下 我学习easyui的资料

一些好心人分享的: 

http://www.zi-han.net/case/easyui/

官方的:

http://www.easyui.org.cn/


easyui的优点

轻量级。
基本的组件都用,即“麻雀虽小五脏俱全”。
使用简洁方便,比如支持html+js。
可扩展性。

为什么会想用easyui?

现在做的项目,虽然前端好看点,但是考虑的东西会更多,尤其是ajax用了后,删除或者更改了数据,在后端搞定后,还要把前端的那个数据修改。这样很麻烦。  用了一些杂七杂八的js 插件,项目时常会冲突,当然后期也都解决了。

最近做的项目都是bootstrap saltstack做的,现在大量的时间消耗在前端上,领导前端要求有些高,突然发现用 easyui做后端的同事反而啥事都没有,因为easyui的界面很专业,不像用bootstrap之后,领导总会觉得你的界面能更好点。

关于后端,easyui的使用介绍上,貌似更多的人在用java、php,我个人喜欢的python当然也可以用,easyui只是个前端框架罢了。 


不管怎么说还是建议学习下吧,以后肯定能用到。

数据表格[datagrid]

easyui的datagrid是个很重要的东西,在这里面可以实现基本所有的功能。



easy的树形表格



<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Tree - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function reload(){
			var node = ('#tt2').tree('getSelected');
			if (node){('#tt2').tree('reload', node.target);
			} else {
				('#tt2').tree('reload');
			}
		}
		function getChildren(){
			var node =('#tt2').tree('getSelected');
			if (node){
				var children = ('#tt2').tree('getChildren', node.target);
			} else {
				var children =('#tt2').tree('getChildren');
			}
			var s = '';
			for(var i=0; i<children.length; i++){
				s += children[i].text + ',';
			}
			alert(s);
		}
		function getChecked(){
			var nodes = ('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node =('#tt2').tree('getSelected');
			alert(node.text);
		}
		function collapse(){
			var node = ('#tt2').tree('getSelected');('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = ('#tt2').tree('getSelected');('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			var node = ('#tt2').tree('getSelected');
			if (node){('#tt2').tree('collapseAll', node.target);
			} else {
				('#tt2').tree('collapseAll');
			}
		}
		function expandAll(){
			var node =('#tt2').tree('getSelected');
			if (node){
				('#tt2').tree('expandAll', node.target);
			} else {('#tt2').tree('expandAll');
			}
		}
		function append(){
			var node = ('#tt2').tree('getSelected');('#tt2').tree('append',{
				parent: (node?node.target:null),
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = ('#tt2').tree('getSelected');('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = ('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = ('#tt2').tree('getSelected');
			var b =('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
	</script>
</head>
<body>
	<h2>Tree</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>Click the node and drag it to other position.</div>
	</div>
	
	<p>Create from HTML markup</p>
	<ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">
		<li>
			<span>Folder</span>
			<ul>
				<li data-options="state:'closed'">
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
	<hr></hr>
	<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" onclick="reload()">reload</a>
		<a href="#" onclick="getChildren()">getChildren</a>
		<a href="#" onclick="getChecked()">getChecked</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="collapse()">collapse</a>
		<a href="#" onclick="expand()">expand</a>
		<a href="#" onclick="collapseAll()">collapseAll</a>
		<a href="#" onclick="expandAll()">expandAll</a>
		<a href="#" onclick="append()">append</a>
		<a href="#" onclick="remove()">remove</a>
		<a href="#" onclick="update()">update</a>
		<a href="#" onclick="isLeaf()">isLeaf</a>
	</div>

	<ul id="tt2" class="easyui-tree" data-options="url:'tree_data.json',checkbox:true,
			onClick: function(node){
				(this).tree('toggle', node.target);
			},
			onContextMenu: function(e,node){
				e.preventDefault();(this).tree('select',node.target);
				$('#mm').menu('show',{
					left: e.pageX,
					top: e.pageY
				});
			}"
	></ul>
	
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
		<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
		<div class="menu-sep"></div>
		<div onclick="expand()">Expand</div>
		<div onclick="collapse()">Collapse</div>
	</div>
</body>
</html>


easyui是个好东西,官网都给你提供了demo,你需要做的是,保存到文件里面,然后跑一下,感受一下,然后移植到你的项目里面就ok了,公司里面有好几个项目都已经用easyui开发了项目,后台的体验很棒。


后续会更新下自己的学习的进度,以及demo。


大家觉得文章对你有些作用! 如果想赏钱,可以用微信扫描下面的二维码,感谢!
另外再次标注博客原地址  xiaorui.cc

1 Response

  1. furion 2014年4月23日 / 下午7:59

    尾毛你这么屌?

发表评论

邮箱地址不会被公开。 必填项已用*标注