操作方法
上个礼拜我们经历对我说，他不满意满载OA管理系统的框架，希望换一个带TAB标签页的那种，这样层打开过什么阳面都一目了然，客观性能比较好，综合之后，决定使用JQUERY EASYUI 框架 原框架如图所示
在决定使用JQUERY EASYUI 框架之前也查看了其它几个项目的框架，比如说ext.net的框架，还有组合式的框架，应着原OA系统各页面之间都是调用的JQUERY，引用的是JS以及AJAX，所以依据元项目的可行性以及对于引用框架冲突的考虑，还是使用JQUERY EASYUI 框架 引用之后 框架 大体上是这样的，如图所示，top列还没有添加东西，比较粗糙，细节还在完善中，花了一天的时间研究JQUERY EASYUI 框架，花了半天的时间做了个粗燥的框架
现有框架左边是一个JQUERY ztree的引用，主要数据从后台进行查询绑定，对于灵活性而言非常的好，前面引用主要代码是： var setting = { data: { simpleData: { enable: true } }, callback:{ onClick: function(event,treeId,treeNode){ if(treeNode.pageurl) { debugger; $("#hididlist").val(treeNode.id); loadpage(treeNode.name,treeNode.pageurl); } } } }; //tree控件 var zNodes = <%= result %> $.fn.zTree.init($("#ztree"), setting, zNodes); var ZtreeObject = $.fn.zTree.getZTreeObj("ztree"); function SetStyle(treeobj) { var nodeid = $("#hididlist").val(); if(nodeid !="") { var node = treeobj.getNodeByParam("id",nodeid,null); // var node = treeobj.getNodeByTId(nodeid); if(node != null) { treeobj.selectNode(node); } } } SetStyle(ZtreeObject) 后台绑定代码; /// 绑定数据，根据登录人来绑定 /// </summary> /// <param name="loginid"></param> protected string getfirstlevel(int loginid) { DataTable dt = PJOABLL.ViewMenuByLoginManager.getList(" loginid='"+loginid+"' and parentnodeid=0"); result = "["; for (int i = 0; i < dt.Rows.Count; i++) { result += "{id:" + dt.Rows[i]["nodeid"] + ", pId: 0, name:'" + dt.Rows[i]["name"] + "',pageurl:'', icon:'../../../Images/public/bfolder.gif', open: false },"; // DataRow[] dtChild =dt.Select(" parentnodeid = '" + dt.Rows[i]["nodeid"] + "'"); DataTable dtChild = PJOABLL.ViewMenuByLoginManager.getList(" loginid='" + loginid + "' and parentnodeid='" + dt.Rows[i]["nodeid"] + "'"); for (int j = 0; j < dtChild.Rows.Count; j++) { if (dt != null && dt.Rows[i]["name"].ToString()!= "" && dtChild.Rows[j]["nodeid"].ToString()!="") { result += "{id:" + dtChild.Rows[j]["nodeid"] + ", pId: " + dt.Rows[i]["nodeid"] + ", name: '" + dtChild.Rows[j]["name"] + "',pageurl:'" + dtChild.Rows[j]["url"] + "',icon:''},"; } } } result = result.TrimEnd(',') + "]"; return result; } 在page_load里面引用这个方法
这样，当点击左边列表框的时候，右边会相应的增加一个tab page ,主要代码为： //在右边center区域打开菜单，新增tab function loadpage(text, url) { if ($("#tabs").tabs('exists', text)) { $('#tabs').tabs('select', text); } else { debugger; $('#tabs').tabs('add', { title: text, content: '<iframe src="'+url+'" frameBorder="0" border="0" style="width: 100%; height: 100%;" noResize/>', closable: true //href: url }); } } center区域的设置实在body里面定义的，如：