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。
尾毛你这么屌？