53. 部门信息显示 EXTJS 单击树节点
1.
1 /** 2 * @author sux 3 * @time 2011-1-14 4 * @desc 部门信息显示 5 */ 6 deptInfoGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{ 7 id: 'deptInfoPanel', 8 //renderTo: Ext.getBody(), //渲染到body 9 constructor: function(){ 10 Ext.QuickTips.init(); 11 this['store'] = new Ext.data.JsonStore({ 12 url: 'dept_list.action', 13 root: 'root', 14 totalProperty: 'totalProperty', 15 //record 16 fields: ['deptId','deptName', 17 'deptNum','deptMgr','deptRemark'] 18 }); 19 var rowNumber = new Ext.grid.RowNumberer(); //序列号 20 var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false} 21 deptInfoGridPanel.superclass.constructor.call(this,{ 22 width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(), 23 height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(), 24 /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/ 25 monitorResize: true, 26 doLayout: function() { 27 this.setWidth(document.body.clientWidth-205); 28 this.setHeight(document.body.clientHeight-140); 29 Ext.grid.GridPanel.prototype.doLayout.call(this); 30 } , 31 /**end**/ 32 viewConfig: { 33 forceFit: true, 34 columnsText : "显示/隐藏列", 35 sortAscText : "正序排列", 36 sortDescText : "倒序排列" 37 }, 38 sm: checkbox, 39 columns: [ 40 rowNumber, checkbox, 41 { 42 header: '部门编号', 43 dataIndex: 'deptId', 44 align: 'center' 45 },{ 46 header: '部门名称', 47 dataIndex: 'deptName', 48 align: 'center' 49 },{ 50 header: '部门人数', 51 dataIndex: 'deptNum', 52 align: 'center' 53 },{ 54 header: '部门经理', 55 dataIndex: 'deptMgr', 56 align: 'center' 57 },{ 58 header: '备注', 59 dataIndex: 'deptRemark', 60 name: 'deptRemark', 61 renderer: Ext.hrmsys.grid.tooltip.subLength, 62 align: 'center' 63 }], 64 tbar: new Ext.Toolbar({ 65 style: 'padding: 5px;', 66 id: 'departToolbar', 67 items: ['条目:',{ 68 xtype: 'combo', 69 width: 80, 70 triggerAction: 'all', 71 editable: false, 72 mode: 'local', 73 store: new Ext.data.SimpleStore({ 74 fields: ['name','value'], 75 data: [[" ","全部"],["deptId","部门编号"],["deptName","部门名称"],["deptMgr","部门经理"]] 76 }), 77 id: 'condition_dept', 78 displayField: 'value', 79 valueField: 'name', 80 emptyText: '请选择' 81 },'内容:',{ 82 id: 'condition_dept_value', 83 xtype: 'textfield', 84 listeners : { 85 specialkey : function(field, e) {//添加回车事件 86 if (e.getKey() == Ext.EventObject.ENTER) { 87 queryDeptFn(); 88 } 89 } 90 } 91 },{ 92 text: '查询', 93 tooltip: '查询部门', 94 iconCls: 'search', 95 hidden: 'true', 96 id: 'dept_query', 97 handler: queryDeptFn 98 },{ 99 text: '删除', 100 tooltip: '删除部门', 101 id: 'dept_delete', 102 iconCls: 'delete', 103 hidden: 'true', 104 handler: delDeptFn 105 },{ 106 text: '添加', 107 tooltip: '添加部门', 108 id: 'dept_add', 109 hidden: 'true', 110 iconCls: 'add', 111 handler: addDeptFn 112 },{ 113 text: '修改', 114 id: 'dept_update', 115 iconCls: 'update', 116 hidden: 'true', 117 tooltip: '修改部门', 118 handler: updateDeptFn 119 }] 120 }), 121 bbar: new PagingToolbar(this['store'], 20) 122 }); 123 this.getStore().load({ 124 params:{ 125 start: 0, 126 limit: 20 127 } 128 }); 129 //new Ext.Viewport().render(); 130 } 131 }); 132 133 addDeptFn = function(){ 134 deptAddWin = new DeptAddWin(); 135 deptAddWin.show(); 136 }; 137 138 delDeptFn = function(){ 139 gridDel('deptInfoPanel','deptId', 'dept_delete.action'); 140 }; 141 142 updateDeptFn = function(){ 143 deptAddWin = new DeptAddWin(); 144 deptAddWin.title = '部门信息修改'; 145 var selectionModel = Ext.getCmp('deptInfoPanel').getSelectionModel(); 146 var record = selectionModel.getSelections(); 147 if(record.length != 1){ 148 Ext.Msg.alert('提示','请选择一个'); 149 return; 150 } 151 var deptId = record[0].get('deptId'); 152 Ext.getCmp('deptAddFormId').getForm().load({ 153 url: 'dept_intoUpdate.action', 154 params: { 155 deptId: deptId 156 } 157 }) 158 deptAddWin.show(); 159 }; 160 161 queryDeptFn = function(){ 162 var condition = Ext.getCmp('condition_dept').getValue(); 163 var conditionValue = Ext.getCmp("condition_dept_value").getValue(); 164 Ext.getCmp("deptInfoPanel").getStore().reload({ 165 params: { 166 condition: condition, 167 conditionValue : conditionValue, 168 start: 0, 169 limit: 20 170 } 171 }) 172 };
2.添加一个新的部门窗口
1 Ext.namespace("hrmsys.dept.add"); 2 //新建一个window窗口 3 DeptAddWin = Ext.extend(Ext.Window,{ 4 id: 'deptAddWinId', 5 addForm: null, 6 constructor: function(){ 7 addForm = new DeptAddForm(); 8 DeptAddWin.superclass.constructor.call(this,{ 9 title: '部门录入', 10 width: 400, 11 modal: true, 12 height: 350, 13 collapsible: true, 14 colsable: true, 15 layout: 'form', 16 items: [addForm] 17 }) 18 } 19 }) 20 //窗口里包含一个Form面板 21 DeptAddForm = Ext.extend(Ext.form.FormPanel,{ 22 id: 'deptAddFormId', 23 constructor: function(){ 24 Ext.QuickTips.init(); 25 //加载后台数据,进行转换 26 var reader = new Ext.data.JsonReader({},[{ 27 name: 'dept.deptId' , mapping: 'deptId' 28 },{ 29 name: 'dept.deptName', mapping: 'deptName' 30 },{ 31 name: 'dept.deptMgr', mapping: 'deptMgr' 32 },{ 33 name: 'dept.deptRemark', mapping: 'deptRemark' 34 }]); 35 DeptAddWin.superclass.constructor.call(this, { 36 labelWidth: 80, 37 padding: '20 0 0 50', 38 reader: reader, 39 labelAlign: 'right', 40 border: false, 41 frame: true, 42 items: [{ 43 xtype: 'textfield', 44 fieldLabel: '部门编号', 45 allowBlank: false, 46 msgTarget: 'side', 47 blankText: '不能为空', 48 emptyText: '不能为空', 49 width: 150, 50 name: 'dept.deptId' 51 },{ 52 xtype: 'textfield', 53 fieldLabel: '部门名称', 54 allowBlank: false, 55 msgTarget: 'side', 56 blankText: '不能为空', 57 emptyText: '不能为空', 58 width: 150, 59 name: 'dept.deptName' 60 },{ 61 xtype: 'textfield', 62 width: 150, 63 fieldLabel: '部门经理工号', 64 id: 'empId', 65 msgTarget: 'side', 66 listeners: {'blur': blurFn} 67 },{ 68 xtype: 'textfield', 69 fieldLabel: '部门经理姓名', 70 width: 150, 71 id: 'empName', 72 name: 'dept.deptMgr', 73 readOnly: true 74 },{ 75 xtype: 'textarea', 76 fieldLabel: '备注', 77 width: 150, 78 height: 150, 79 name: 'dept.deptRemark' 80 }], 81 buttonAlign: 'center', 82 buttons: [{ 83 text: '保存', 84 handler: function(){ 85 //验证表单填写的数据是否有效 86 if(!Ext.getCmp('deptAddFormId').getForm().isValid()){ 87 return; 88 } 89 //提交表单 90 Ext.getCmp('deptAddFormId').getForm().submit({ 91 url: 'dept_save.action', 92 method: 'post', 93 waitMsg: '正在保存数据...', 94 waitTitle: '提示', 95 scope: this, 96 success: saveDeptSuccessFn, 97 failure: save_failure 98 }) 99 } 100 },{ 101 text: '关闭', 102 handler: function(){ 103 Ext.getCmp('deptAddWinId').destroy(); 104 } 105 }] 106 }) 107 } 108 }); 109 110 //提交表单成功处理函数 111 saveDeptSuccessFn = function(form, action){ 112 //消息提示框 113 Ext.Msg.confirm('提示', action.result.msg, function(button, text){ 114 if(button == "yes"){ 115 form.reset(); 116 //销毁面板 117 Ext.getCmp('deptAddWinId').destroy(); 118 //reload()重新加载数据时 119 Ext.getCmp('deptInfoPanel').getStore().reload();//刷新部门显示列表 120 } 121 }); 122 }; 123 124 //提交失败处理函数 125 save_failure = function(form, action){ 126 Ext.Msg.alert('提示',"连接失败", function(){ 127 128 }); 129 }; 130 //工号失焦点事件 131 blurFn = function(value){ 132 var empId = value.getRawValue(); 133 Ext.Ajax.request({ 134 url: 'emp_isExist.action', 135 method: 'post', 136 params: { 137 empId: empId 138 }, 139 success: isExistSuccessFn, 140 failure: save_failure 141 }) 142 }; 143 isExistSuccessFn = function(response, options){ 144 if(response.responseText != "") 145 Ext.get('empName').dom.value = response.responseText; 146 else{ 成批设置表单字段为验证无效 147 Ext.getCmp('empId').markInvalid('此工号不存在'); 148 } 149 };
3.删除部门
1 /** 2 * 删除表格中选中的内容 3 * @param {Object} panelId 表单面板的Id 4 * @param {Object} delId 数据库的删除时依据的属性 5 * @param {Object} url 提交的URL 6 * @return {TypeName} 7 */ 8 9 function gridDel(panelId, delId, url){ 10 //中某一行值 11 var oSelMode = Ext.getCmp(panelId).getSelectionModel(); 12 //某一列的值 13 var oRecords = oSelMode.getSelections(); 14 var ids = ""; 15 for(var i=0;i<oRecords.length;i++){ 16 ids += oRecords[i].get(delId); 17 if(i != oRecords.length-1) ids += ","; 18 }; 19 if(ids != null && ids != ""){ 20 Ext.Msg.confirm("提示","确定删除",function(button, text){ 21 if(button == "yes"){ 22 Ext.Ajax.request({ 23 url: url, 24 success: function(response, options){ 25 var datas = Ext.util.JSON.decode(response.responseText); 26 Ext.Msg.alert("提示", datas.msg, function(){ 27 Ext.getCmp(panelId).getStore().reload(); 28 }) 29 }, 30 failure: function(response, options){ 31 Ext.Msg.alert("提示", '连接失败', function(){}) 32 }, 33 params: { 34 ids: ids 35 } 36 }) 37 } 38 }) 39 }else{ 40 Ext.Msg.alert("提示","请先选择",function(){}); 41 } 42 }; 43 /** 44 * 分页栏类 45 * @param {Object} store 表格存储store 46 * @param {Object} pageSize 页面大小 47 * @memberOf {TypeName} 48 */ 49 PagingToolbar = Ext.extend(Ext.PagingToolbar, { 50 constructor: function(store, pageSize){ 51 PagingToolbar.superclass.constructor.call(this, { 52 store: store, 53 pageSize: pageSize, //页面大小 54 displayInfo: true, 55 displayMsg : '共<font color="red"> {2} </font>条记录,当前页记录索引<font color="red"> {0} - {1}</font> ', 56 emptyMsg: '没有数据', 57 refreshText: '刷新', 58 firstText: '第一页', 59 prevText: '前一页', 60 nextText: '下一页', 61 lastText: '最后一页' 62 }) 63 } 64 })
4.部门信息jsp页面
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <script type="text/javascript"> 3 var deptPanel = new deptInfoGridPanel(); 4 var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1]; 5 juage(tabId,"dept",deptPanel,"tab"); 6 //deptPanel.render("tab"); 7 </script> 8 <div id="tab" ></div>
5.
1 /** 2 * 根据用户权限显示不同的页面 3 * 前后得到的菜单节点id和后台用户的角色id查询数据库获得用户权限 4 * @param {Object} id 页面id,本质是菜单节点的id 5 * @param {Object} page 按钮id前缀 6 * @param {Object} cmp 组件 7 * @param {Object} renderId 渲染的id 8 */ 9 function juage(id,page,cmp, renderId){ 10 //设置遮罩,当按钮隐藏之后,再隐藏遮罩 11 var myMask = new Ext.LoadMask('mainTab', {msg:"请稍等..."}); 12 myMask.show(); 13 Ext.Ajax.request({ 14 url: 'permission_permission.action', 15 method: 'post', 16 success: function (response, options){ 17 var datas = response.responseText; 18 if(datas != ''){ 19 var fn = datas.split(' '); 20 for(var i = 0; i< fn.length; i++){ 21 var comp = Ext.getCmp(page+'_'+fn[i]); 22 if(comp){ 23 comp.show(); //将没有权限的按钮隐藏hiden 24 } 25 } 26 } 27 //1.调用组件的render方法 28 //renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子,个人是这么理解,如果你不是可以看下本文 29 cmp.render(renderId); 30 myMask.hide(); 31 }, 32 failure: function(response, options){ 33 Ext.Msg.alert('提示','连接后台失败'); 34 }, 35 params: { 36 menuId: id 37 } 38 }) 39 };
转载于:https://www.cnblogs.com/sharpest/p/7639480.html
53. 部门信息显示 EXTJS 单击树节点相关推荐
- 若依前后端分离版实现基于el-tree实现选中部门树节点同步选中多选框的操作
场景 ElementUI中el-tree控件封装公共控件(部门列表)并请求后台数据获取父子级数据并构建成前端数据结构数据: https://blog.csdn.net/BADAO_LIUMANG_QI ...
- uniapp树组件优化 树节点设置单选,单击单选框可以选中多个 偶尔根节点点击后会隐藏整棵树
在上篇文章的组件基础上做了两个调整 1.处理偶尔根节点点击后会隐藏整棵树的情况,lastRank是判断是否是最后一级,但是如果是根节点的话是不会有lastRank 2.处理树节点设置multiple是 ...
- java swing 禁用鼠标事件_Java学习笔记:swing中树控件,设置树节点的图标,按钮美化,鼠标事件,禁止鼠标双击...
树控件: JTree:声明树控件 声明树的节点: DefaultMutableTreeNode dd=new DefaultMutableTreeNode("传入树节点名称"); ...
- osgEarth的Rex引擎原理分析(一二四)osgEarth着色器文件与场景树节点的对应关系
目标:(一二三)中问题210 场景树 rex | terrain-------------------------------------------------------------------- ...
- zTree实现删除树节点
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! zTre ...
- JS实现自定义折叠树节点展开层数
1. 描述 在日常报表制作过程中,组织树形式是非常便捷常用的展示形式.但在使用过程中,因为数据量,以及组织树层级不确定时候.我们希望能够初始化时候根据需求展开一定层级的树节点. 2. 思路 通过给组织 ...
- NC65树表结构参照左边树节点的定位属性
NC65树表结构参照左边树节点的定位属性: nc.ui.bd.ref.AbstractRefGridTreeModel中的classLocatePK 在 nc.ui.bd.ref.UFRefGridT ...
- ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...
- easyui-treegrid移除树节点出错
easyui-treegrid移除树节点出错 >>>>>>>>>>>>>>>>>>>& ...
最新文章
- 都有Python了,还要什么编译器
- Understanding CORS
- mysql 密码 You must reset your password using ALTER USER statement before executing this statement....
- 法猿生存计划--左边的管理,技术正确
- 需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP...
- synchronized的使用方法
- 夜间工作致癌的原因被发现:熬夜破坏了癌症相关基因的节律,导致DNA损伤增加、修复效率降低...
- androidfiletransfer_mac手机助手(Android File Transfer)下载_mac手机助手(Android File Transfer)官方下载...
- odom_out_and_back.cpp
- nodejs初步搭建HelloWord
- OpenCV 文本显示 putText 和 getTextSize
- vm虚拟机修改物理时间_GPU虚拟机创建时间深度优化
- 在php里面加音乐,如何给视频添加音乐 视频配上背景音乐
- 浙大pintia答案c语言,浙大版《C语言程序设计(第3版)》题目集 - 学习笔记 - 编程题 - 习题3-3 出租车计价...
- javaCRC8计算的坑
- BZOJ2959长跑——LCT+并查集(LCT动态维护边双连通分量)
- 再不跳槽,应届毕业生拿的都比我多了!
- 安卓的个性化彩色二维码的完美实现
- 天津科技大学计算机科学与信息工程学院,天津科技大学计算机科学与信息工程学院简介...
- 天龙3d服务器维护,天龙八部3D4月6日维护服务器公告
热门文章
- java interfave_高级类特性----接口(intertface)
- 打开autoCAD2004出现fail to get commcntrcontroller错误信息
- 计算机网络配置IP老是自动出现默认IP,我的电脑设置的是自动获取IP为什么每次开机后IP地址就变了啊!重初學者动设置然后再自动获取才会回来...
- Spring Cloud Data Flow整合UAA之使用LDAP进行账号管理
- java什么情况下传入对象_java中传输对象时候的问题(转)
- kmplayer绿色版遇到问题'We strongle recommand you...'
- DARPA互联网协议的设计哲学
- Mongodb增删改查高级操作
- 安卓,那个诺基亚回不去的地方
- 设置oracle不使用swap,安装oracle12c swap不足