1、layout 页面布局
2、accordion 折叠面板
<div class="easyui-accordion" data-options="fit:true">
<div title="面板一">test1</div>
<div title="面板二">test2</div>
</div>
3、tabs 选项卡面板
<div class="easyui-tabs" data-options="fit:true">
<div title="面板一"></div>
<div titlte="面板二"></div>
</div>
1、使用标准json数据构造ztree
var setting = {};
// 构造json数据
var zNodes = [
// 每个json对象对应一个节点数据
{name : '系统管理'},
// 每个json对象对应一个节点数据
{name : '用户管理', children : [{name : '用户添加'}, {name : '用户修改'}]},
// 每个json对象对应一个节点数据
{name : '权限管理'}
];
// 创建ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
2、使用简单json数据构造ztree
var setting2 = {
data : {
simpleData : {
// 启用简单json数据描述节点数据
enable : true
}
}
};
// 构造json数据
var zNodes2 = [
// 每个json对象对应一个节点数据
{id : '1', pId : '0', name : '系统管理'},
// 每个json对象对应一个节点数据
{id : '2', pId : '0', name : '用户管理'},
{id : '21', pId : '2', name : '用户添加'},
{id : '22', pId : '2', name : '用户修改'},
// 每个json对象对应一个节点数据
{id : '3', pId : '0', name : '权限管理'}
];
// 创建ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
3、发送ajax请求获取菜单数据构造ztree
var setting3 = {
data : {
simpleData : {
// 启用简单json数据描述节点数据
enable : true
}
}
};
// 发送ajax请求获取json数据构造ztree
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url, {}, function(data) {
// 创建ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
}, 'json');
<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>
<!-- 使用div制作下拉菜单选项 -->
<div id="mm">
<!-- 使用子div制作具体的一个选项 -->
<div onclick="alert(111)" data-options="iconCls:'icon-edit'">修改密码</div>
<div>联系管理员</div>
<div class="menu-sep"></div>
<div>退出系统</div>
</div>
rowIndex:被双击行的索引,从 0 开始
rowData:被双击行对应的记录(对应的数据)
// 当用户双击一行时触发该事件
function doDblClickRow(rowIndex, rowData) { // rowData => id:xxx,name:xxx,...
// 打开修改取派员窗口
$('#editStaffWindow').window("open");
// 回显数据
// $("input[name=name]").val(rowData.name); // 显示姓名
$('#editStaffForm').form("load", rowData); // 显示整个表格的数据
}