JQUERY EASYUI 框架的使用心得

上个礼拜我们经历对我说，他不满意满载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) 后台绑定代码; /// 绑定数据，根据登录人来绑定        ///         ///         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: '