/// <summary> /// 获取列Json /// </summary> /// <param></param> /// <returns></returns> public string GetColumnsJsonStr() { string fieldJson = "{\"columns\":[[{\"field\":\"Id\",\"title\":\"主键\",\"width\":\"40\"},"; //此处获取输出表的列... DataTable dtFields = new DataTable(); //SqlHelper.GetDataTable.... if (dtFields.Rows.Count > 0) { foreach (DataRow dr in dtFields.Rows) { fieldJson += "{\"field\":\"" + dr["FieldName"].ToString() + "\",\"title\":\"" + dr["FieldViewName"].ToString() + "\",\"width\":\"100\"},"; } } fieldJson += "{\"field\":\"CreateBy\",\"title\":\"创建人\",\"width\":\"80\"},"; fieldJson += "{\"field\":\"CreateTime\",\"title\":\"创建时间\",\"width\":\"130\"},"; fieldJson += "]]}"; return fieldJson; }
3.easyui-accordion和easyui-tree构造多层级目录一级选项卡菜单框架
如下图：
菜单树HTML：
<div data-options="region:'west',split:true,title:'功能导航'"> <div> </div> </div> <div data-options="region:'center'"> <div fit="true" data-options=" tools:[ {iconCls : 'icon-arrow_refresh',text:'刷新',handler:refreshTab}, {iconCls : 'icon-delete3',text:'关闭全部',handler:closeTab} ]"> <div title="我的主页" data-options="iconCls:'icon-house',closable:false"> This is the Home content. </div> </div> </div>
JS：
function BindRightAccordion() { $("#RightAccordion").accordion({ //初始化accordion fillSpace: true, fit: true, border: false, animate: false }); //获取第一层初始目录 $.post("/Home/GetTreeByEasyui", { "id": "0" }, function (data) { if (data == "0") { window.location.href = '/Login/Index'; } $.each(data, function (i, e) { var id = e.id; $('#RightAccordion').accordion('add', { title: e.text, content: "<ul ></ul>", selected: true, iconCls: e.iconCls }); $.parser.parse(); //获取二级以下目录 含2级 $.post("/Home/GetTreeByEasyui?id=" + id, function (data) { $("#tree" + id).tree({ data: data, onBeforeExpand: function (node, param) { $("#tree" + id).tree('options').url = "/Home/GetTreeByEasyui?id=" + node.id; }, onClick: function (node) { if (node.state == 'closed') { $(this).tree('expand', node.target); } else if (node.state == 'open') { $(this).tree('collapse', node.target); var tabTitle = node.text; var url = node.attributes; var icon = node.iconCls; addTab(tabTitle, url, icon); } } }); }, 'json'); }); }, "json"); } //选项卡 function addTab(subtitle, url, icon) { var strHtml = '<iframe frameborder="0" scrolling="yes" src="' + url + '"></iframe>'; if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title: subtitle, content: strHtml, iconCls: icon, closable: true, loadingMessage: '正在加载中......' }); } else { $('#tabs').tabs('select', subtitle); } } //刷新选项卡 function refreshTab() { var index = $('#tabs').tabs('getTabIndex', $('#tabs').tabs('getSelected')); if (index != -1) { var tab = $('#tabs').tabs('getTab', index); $('#tabs').tabs('update', { tab: tab, options: { selected: true } }); } } //关闭选项卡 function closeTab() { $('.tabs-inner span').each(function (i, n) { var t = $(n).text(); if (t != '') { if (t != "我的主页") { $('#tabs').tabs('close', t); } } }); }
后端输出Json代码:
/// <summary> /// 获取导航菜单 /// </summary> /// <param>所属</param> /// <returns>树</returns> public JsonResult GetTreeByEasyui(string id) { try { if (uInfo != null) { DataTable dt = new MenuBLL().GetUserMenuData( int.Parse(id)); List<SysModuleNavModel> list = new List<SysModuleNavModel>(); for (int i = 0; i < dt.Rows.Count; i++) { SysModuleNavModel model = new SysModuleNavModel(); model.id = dt.Rows[i]["menuid"].ToString(); model.text = dt.Rows[i]["menuname"].ToString(); model.attributes = dt.Rows[i]["linkaddress"].ToString(); model.iconCls = dt.Rows[i]["icon"].ToString(); if (new MenuBLL().GetMenuList(" AND ParentId= " + model.id).Rows.Count > 0) { model.state = "closed"; } else { model.state = "open"; } list.Add(model); } return Json(list); } else { return Json("0", JsonRequestBehavior.AllowGet); } } catch (Exception ex) { return Json("0", JsonRequestBehavior.AllowGet); } } public class SysModuleNavModel { public string id { get; set; } public string text { get; set; } public string iconCls { get; set; } public string attributes { get; set; } public string state { get; set; } public List<SysModuleNavModel> children { get; set; } }
3.dialog弹出窗口：
(1)内容页为iframe: