jQuery---EasyUI小案列

王朝学院·作者佚名 2016-08-27

宽屏版字体: 小|中|大|超大

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

以上来源百度百科

下面介绍下比较常用的插件：

分页[pagination]实例：

<html>

<head>

<title>客户端分页demo</title>

</head>

<body>

<h2>客户端分页dem</h2>

</div>

<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10">

<thead>

<tr>

<th field="amount" width="80" align="right">Amount</th>

<th field="PRice" width="80" align="right">Price</th>

</tr>

</thead>

</table>

function getData(){//模拟数据

var rows = [];

for(var i=1; i<=80000; i++){

var amount = Math.floor(Math.random()*1000);

var price = Math.floor(Math.random()*1000);

rows.push({

inv: 'Inv No '+i,

date: $.fn.datebox.defaults.formatter(new Date()),

name: 'Name '+i,

amount: amount,

price: price,

cost: amount*price,

note: 'Note '+i

});

}

//console.log(JSON.stringify(rows));

return rows;

}

function pagerFilter(data){

if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组

data = {

total: data.length,

rows: data

}

var dg = $(this);

var opts = dg.datagrid('options');

var pager = dg.datagrid('getPager');

pager.pagination({

onSelectPage:function(pageNum, pageSize){

opts.pageNumber = pageNum;

opts.pageSize = pageSize;

pager.pagination('refresh',{

pageNumber:pageNum,

pageSize:pageSize

});

dg.datagrid('loadData',data);

}

});

if (!data.originalRows){

data.originalRows = (data.rows);

}

var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

var end = start + parseInt(opts.pageSize);

data.rows = (data.originalRows.slice(start, end));

return data;

}

$(function(){//加载数据

$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

});

</script>

</body>

</html>

效果图：

进度条[progressbar]<html>

<head>

function test(){

var value = $('#p').progressbar('getValue');

if (value < 100){

value += Math.floor(Math.random() * 10);

$('#p').progressbar('setValue', value);

setTimeout(arguments.callee, 200);

}

</script>

</head>

<body>

进度条

<div>Click below button to show progress information.</div>

</div>

</div>

</body>

</html>

树形菜单[tree]

<html>

<head>

<title>客户端分页demo</title>

.menuLink {

cursor: pointer;

}

</style>

$(function () {

//动态菜单数据

var treeData = [{

text : "菜单",

children : [{

text : "一级菜单1",

attributes : {

url : ""

}

}, {

text : "一级菜单2",

attributes : {

url : ""

}

}, {

text : "一级菜单3",

state : "closed",

children : [{

text : "二级菜单1",

attributes : {

url : ""

}

}, {

text : "二级菜单2",

attributes : {

url : ""

}

}, {

text : "二级菜单3",

attributes : {

url : ""

}

]

}

]

}

];

//实例化树形菜单

$("#tree").tree({

data : treeData,

lines : true,

onClick : function (node) {

if (node.attributes) {

Open(node.text, node.attributes.url);

}

});

//在右边center区域打开菜单，新增tab

function Open(text, url) {

if ($("#tabs").tabs('exists', text)) {

$('#tabs').tabs('select', text);

} else {

$('#tabs').tabs('add', {

title : text,

closable : true,

content : text

});

}

//绑定tabs的右键菜单

$("#tabs").tabs({

onContextMenu : function (e, title) {

e.preventDefault();

$('#tabsMenu').menu('show', {

left : e.pageX,

top : e.pageY

}).data("tabTitle", title);

}

});

//实例化menu的onClick事件

$("#tabsMenu").menu({

onClick : function (item) {

CloseTab(this, item.name);

}

});

//几个关闭事件的实现

function CloseTab(menu, type) {

var curTabTitle = $(menu).data("tabTitle");

var tabs = $("#tabs");

if (type === "close") {

tabs.tabs("close", curTabTitle);

return;

}

var allTabs = tabs.tabs("tabs");

var closeTabsTitle = [];

$.each(allTabs, function () {

var opt = $(this).panel("options");

if (opt.closable && opt.title != curTabTitle && type === "Other") {

closeTabsTitle.push(opt.title);

} else if (opt.closable && type === "All") {

closeTabsTitle.push(opt.title);

}

});

for (var i = 0; i < closeTabsTitle.length; i++) {

tabs.tabs("close", closeTabsTitle[i]);

}

});

</script>

</head>

<style>

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

.west{

width:200px;

padding:10px;

}

.north{

height:100px;

}

</style>

</head>

<h1>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</h1>

</div>

</div>

</div>

</div>

</body>

</html>

效果图