引入easyui
--先引入jquery.js再引入easyui.js
<script src="js/easyUI-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/easyUI-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
<link href="js/easyUI-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="js/easyUI-1.3.1/themes/default/easyui.css" rel="stylesheet" type="text/css" />
1.Layout
--必须要有region:'center'
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="overflow: hidden; height: 20px;
background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;">
...
</div>
<div data-options="region:'west',title:'我的菜单',iconCls:'icon-leftmenu',split:true"
style="width: 160px; overflow: hidden;">
...
</div>
<div data-options="region:'center'" style="overflow: hidden">
...
</div>
</body>
2.Tabs
--demo
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
...
</div>
<div title="tab1">
...
</div>
</div>
--新增一个选项卡
function addTab(subtitle, url, icon) {
if ($("#tabs").tabs('exists', subtitle)) {
$('#tabs').tabs('select', subtitle);
}
else {
$('#tabs').tabs('add', {
title: subtitle,
closable: true,
href: url,
icon: icon,
selected: true
});
}
}
--关闭一个选项卡
$("#tabs").tabs('close','tab1')
3.Accordion
--demo
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
--生成accordion型菜单 （只能两层）
--后台json
private void GetMenus(HttpContext context)
{
BLL.System.Menu b_menu = new BLL.System.Menu();
DataSet ds = b_menu.GetListByempID(emp_id);
StringBuilder sb = new StringBuilder();
string strJSON = "";
sb.Append("{\"menus\":[");
if (ds.Tables[0].Rows.Count > 0)
{
DataView dv = new DataView(ds.Tables[0]);
dv.RowFilter = " menu_pid=0";
dv.Sort = " menu_sort ";
for (int i = 0; i < dv.Count; i++)
{
if (i > 0)
{
sb.Append(",");
}
sb.Append("{\"menu_id\":\"" + dv[i]["menu_id"] + "\",\"menu_icon\":\"" + dv[i]["menu_icon"] + "\",\"menu_name\":\"" + dv[i]["menu_name"] + "\",");
sb.Append("\"menus\":");
DataView dv2 = new DataView(ds.Tables[0]);
dv2.RowFilter = " menu_pid=" + dv[i]["menu_id"];
dv2.Sort = " menu_sort";
if (dv2.Count > 0)
{
strJSON = JsonConvert.SerializeObject(dv2.ToTable(), new DataTableConverter());
sb.Append(strJSON);
}
else
{
sb.Append("\"\"");
}
sb.Append("}");
}
sb.Append("]}");
}
strJSON = sb.ToString() == "{\"menus\":[" ? "[]" : sb.ToString();
context.Response.Write(strJSON);
}
//初始化左侧
function initleftMenu() {
$("#leftside").accordion();
$.post('.....'),
function (json) {
if (JSON.stringify(json) != '[]') {
$.each(json.menus, function (i, n) {
var menulist = '';
menulist += '<ul>';
$.each(n.menus, function (j, o) {
menulist += '<li><div><a ref="' + o.menu_id + '" href="javascript:void(0)" rel="' + o.menu_linkaddress + '" ><span class="' + o.menu_icon + '" > </span><span class="nav">' + o.menu_name + '</span></a></div></li> ';
})
menulist += '</ul>';
$('#leftside').accordion('add', {
title: n.menu_name,
content: menulist,
iconCls: n.menu_icon,
selected: n.menu_name == '和谐' ? true : false
});
}
)
}
$('.easyui-accordion li a').click(function () {
var tabTitle = $(this).children('.nav').text();
var url = $(this).attr("rel");
var menu_id = $(this).attr("ref");
var s = $(this).children('span');
var icon = s.attr('class');
addTab(tabTitle, url, icon); //创建tabs
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
}, 'json')
};
4.Menu
--简单的右键菜单绑定
$(function () {
$(document).bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
})
return false;
})
})
$('#mm-tabclose').click(function () {
var tab = $('#tabs').tabs('getSelected');
var index = $('#tabs').tabs('getTabIndex', tab);
$('#tabs').tabs('close', index);
});
<div id="mm" class="easyui-menu" style="width:100px;">
<div id=mm-tabclose>关闭当前</div>
<div href='http://www.baidu.com'>百度</div>
<div>
<span>Open</span>
<div style="width:100px;">
<div><b>Word</b></div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
5.Form
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
6.Validatebox
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: 'Field do not match.'
},
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
},
name: {// 验证姓名，可以是中文或英文
validator: function (value) {
return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
},
message: '请输入姓名'
},
integer: {// 验证整数
validator: function (value) {
return /^[+]?[0-9]+\d*$/i.test(value);
},
message: '请输入数字'
},
});
7.Combobox
$('#cc').combobox({
url: '....',
valueField: 'id',
textField: 'text',
width: 100,
editable: false,
value: '1',
multiple,false,
onLoadSuccess: function () {
'...';
},
onSelect: function () {
'...';
}
});
$('#cc').combobox('getValue');
$('#cc').combobox('SetValue','1');
8.Datetimebox
$('#dt').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});
9.Dialog
$('#' + _clausediv).show().dialog({
title: '修改',
iconCls: 'icon-edit',
modal: true,
cache: false,
resizable: false,
closed: false,
closable: true,
width: 350,
height: 250,
buttons: [
{
text: '确定',
iconCls: 'icon-ok',
handler: function () {
...
}
}
],
onOpen: function () {
...
},
onClose: function () {
...
}
});
10.Messager
$.messager.show({
title:'提示',
msg:'操作成功！',
timeout:5000,
showType:'slide',
width:250,
height:100
});
$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
if (r){
// exit action;
}
});
11.DataGrid
--datagrid 多行编辑
var _isedit = false;
var editRow = [];
var checkids = '';
var check_id = [];
$('#dg').datagrid({
url: 'ashx/...',
rownumbers: true,
idField: 'cr_id',
fit: true,
fitColumns: false,
nowrap: false,
pagination: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 20, 40],
singleSelect: true,
sortName: 'cr_name',
striped: false,
toolbar: [
{
text: '修改',
iconCls: 'icon-edit',
handler: function () {
beginedit();
}
}, '-', {
text: '保存',
iconCls: 'icon-save',
handler: function () {
saveedit();
}
}
],
columns: [[
{ title: 'id', field: 'cr_id', checkbox: true },
{ title: '名称', field: 'cr_name', sortable: true, editor: { type: 'text'} },
{ title: '操作', field: 'opt', width: 200, align: 'center', formatter: function (value, row, index) {
return '<a href="javascript:opt1(' + index + ');">操作</a>';
}
}
]],
rowStyler: function (index, row) {
if (row.price > 80) {
return 'background-color:#FFFFFF';
}
},
onAfterEdit: function (rowIndex, rowData, changes) {
var rows = $('#dgcht').datagrid('getRows');
var row = _rows[rowIndex];
$('#dgcht').datagrid('getChanges', 'updated');
check_id.push(_row.trainee_id + '{' + _row.trainee_examine);
}
});
//开始修改
function beginedit() {
var rows = $('#dg').datagrid('getSelections');
if (rows.length > 0&&!_isedit) {
for (var i = 0; i < rows.length; i++) {
var index = $('#dg').datagrid('getRowIndex', rows[i]);
$('#dg').datagrid('beginEdit', index);
editRow.push(index);
}
_isedit = true;
}
}
//保存修改
function saveedit() {
if (_isedit) {
for (var j = 0; j < editRow.length; j++) {
$('#dg').datagrid('endEdit', editRow[j]);
}
checkids = check_id.join(',');
$.post(
'..' ,
function (r) {
}, 'text'
);
_isedit = false;
}
check_id = [];
editRow = [];
checkids = '';
}
12.Tree
--树形菜单
function initleftMenu() {
$('#leftside').tree({
url: '...',
onClick: function (node) {
if (node.attributes.url != "") {
addTab(node.text, node.attributes.url, node.iconCls);
}
}
})
}
--异步获取json树
public static string GetMyTreeJsonByTableasyn(DataTable table, string url, string idCol, string txtCol, string rela, int pid,string icon)
{
StringBuilder sb = new StringBuilder();
if (table.Rows.Count > 0)
{
sb.Append("[");
string filter = null;
if (pid == 0)
{
filter = rela + " =0";
}
else
{
filter = rela + "=" + pid;
}
DataRow[] rows = table.Select(filter,"menu_sort");
if (rows.Length > 0)
{
foreach (DataRow row in rows)
{
sb.Append("{\"id\":" + row[idCol] + ",\"text\":\"" + row[txtCol] + "\",\"state\":\"");
if (table.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
{
sb.Append("closed\",\"iconCls\":\"" + row[icon] + "\","+"\"attributes\":{" + "\"url\":" + "\""+row[url]+"\"" + "}");
}
else
{
sb.Append("\",\"iconCls\":\"" + row[icon] + "\","+ "\"attributes\":{" + "\"url\":" + "\""+row[url]+"\"" + "}");
}
sb.Append("},");
}
sb = sb.Remove(sb.Length - 1, 1);
}
sb.Append("]");
}
return sb.ToString();
}
}
--同步获取json tree
public static string getmytreejsonbytablesyn(DataTable table,string url,string idCol,string txtCol,string rela,int pid ,string icon)
{
StringBuilder sb = new StringBuilder();
DataRow[] rows = table.Select(rela + "=" + pid);
if (rows.Length > 0)
{
if (pid == 0)
{
sb.Append("[");
}
else
{
sb.Append(",\"children\":[");
}
foreach (DataRow row in rows)
{
sb.Append("{");
sb.Append("\"id\":" + row[idCol].ToString() + ",");
sb.Append("\"text\":\"" + row[txtCol].ToString() + "\",");
sb.Append("\"iconCls\":\"" + row[icon].ToString() + "\"");
if(!string.IsNullOrEmpty(row[url].ToString())){
sb.Append(",\"attributes\":{\"url\":\"" + row[url].ToString() + "\"}");
}
sb.Append(getmytreejsonbytablesyn(table, url, idCol, txtCol, rela, Convert.ToInt32(row[idCol]), icon));
sb.Append("},");
}
sb.Remove(sb.Length - 1, 1);
sb.Append("]");
return sb.ToString();
}
else {
return "";
}
}
