extjs 可编辑列批量录入数据
2015-09-08 12:19
603 查看
午休时间,工作需要初学extjs 做出来的界面,只有前台代码,后台的代码太多就不贴出来了 需要的朋友私信哈!
//声明报表ID变量 var modId = 83; var accName = '<%=accName%>'; var currYear= <%=CURRACCYEAR%>; var currMonth=<%=CURRACCMONTH%>; Ext.onReady(function() { Ext.Ajax.request({ method:"post", url:"common/workload/workloadList!openDeprCred.action", success:function(response){ var objDelData = Ext.util.JSON.decode(response.responseText); if(objDelData.errNo==1){ //判断后台传来的msg Ext.MessageBox.alert("警告", objDelData.errMsg); return; } if(objDelData.errNo==2){ Ext.Msg.show({ title : '系统提示', buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.INFO, msg : objDelData.errMsg }); show(objDelData.msg); return; } if(objDelData.errNo==3){ show(objDelData.msg); //如果本期已经折旧,就不显示界面 } } }); }); function show(edit){ //加载界面 //grid Ext.QuickTips.init(); var reader = new Ext.data.JsonReader({ root : "listData", total:"count", id : 'id' }, [ { name : 'id' }, { name : 'yearmon' }, { name : 'code' }, { name : 'name' }, { name : 'total' }, { name : 'usedall' }, { name : 'workload' } ]); var proxy = new Ext.data.HttpProxy({ url : 'common/workload/workloadList!doGetListData.action' }); var store = new Ext.data.Store({ proxy : proxy, reader : reader }); store.load({ params : { start : 0, limit : 20, currYear : "", currMonth : "" } }); //加载数据 var nu = new Ext.grid.RowNumberer(); //自动编排序号 //grid的列模型 var colM = new Ext.grid.ColumnModel([ nu, {header : "id",dataIndex : "id",sortable : true,hidden : true,hideable: false }, {header : "月份",dataIndex : "yearmon",width : 150, css:'background: #f6f5ec;' }, {header : "固定资产编码",dataIndex : "code",width : 150, css:'background: #f6f5ec;' }, {header : "固定资产名称",dataIndex : "name",width : 180, css:'background: #f6f5ec;' }, {header : "总工作量",dataIndex : "total",width : 150, css:'background: #f6f5ec;' }, {header : "初期累计工作量",dataIndex : "usedall",width : 150, css:'background: #f6f5ec;' }, {header : "本期工作量",dataIndex : "workload",width : 150, editor : new Ext.form.NumberField() } ]); //grid的工具栏 var readerDate = new Ext.data.ArrayReader({}, [ { name : 'id' }, { name : 'name' } ]); //显示月份的下拉框 var comn = new Ext.form.ComboBox({ id : 'months', xtype : 'combo', mode : 'local', editable : false, store : new Ext.data.Store({ reader : readerDate, data : [] }), width : 40, valueField : 'name', displayField : 'id', triggerAction : 'all', autoSelect : true, listeners : { beforerender : function() { var monthlist = []; for ( var i = 1; i <= 12; i++) { monthlist.push([ i, i ]); } this.store.loadData(monthlist); } } }); //年份下拉控件 var ycom = new Ext.form.ComboBox({ id : 'years', xtype : 'combo', mode : 'local', editable : false, store : new Ext.data.Store({ reader : readerDate, data : [] }), width : 60, valueField : 'name', displayField : 'id', triggerAction : 'all', autoSelect : true, listeners : { beforerender : function() { var newyear = Ext.util.Format.date(new Date(), 'Y');//取现在的年份数 var yearlist = []; for ( var i = newyear + 10; i >= 1990; i--) { yearlist.push([ i, i ]); } this.store.loadData(yearlist); } } }); Ext.getCmp('years').setValue(currYear); Ext.getCmp('months').setValue(currMonth); //创建grid上的工具栏 var tb3 = new Ext.Toolbar({ items: ['期间:',ycom,'年',comn,'月', '-',{ text: "查找", iconCls : 'view-icon', handler :function(){ var months=Ext.getCmp("months").getValue(); var years=Ext.getCmp("years").getValue(); if(months==""||years==""){ Ext.MessageBox.alert("提示","请选择相关年月!"); return; } var newUrl ="common/workload/workloadList!doGetListData.action"; grid.store.proxy.conn.url=newUrl; grid.store.load({ params : { start : 0, limit : 20, currYear:years, currMonth:months } }); //Ext.getCmp("months").setValue(""); } },'-',{ text:"保存", iconCls:"save-icon", disabled :edit, handler :function(){ var store1=grid.getStore(); store1.pruneModifiedRecords=true; //store的参数pruneModifiedRecords设置为true时,每次进行remove或load操作时store会自动清除modified标记 var modified=store1.modified.slice(); var isok=true;//定义一个条件属性 var jsonArr=[]; Ext.each(modified,function(m){ //grid里面的each方法,遍历被修改过的数据 jsonArr.push(m.data);//将修改的数据加入到数组 }); if(isok){ //判断满足各个条件 if (jsonArr.length >0){ //如果数据没有被修改,不用提交 Ext.Ajax.request({ method:"post", url:"common/workload/workloadEdit!doGetAddnewData.action", success:function(response){ var objDelData = Ext.util.JSON.decode(response.responseText); Ext.MessageBox.alert("提示",objDelData.errMsg); grid.store.reload(); },failure: function(response) { Ext.MessageBox.alert("警告", objDelData.errMsg); grid.store.reload(); }, params:{data:Ext.util.JSON.encode(jsonArr)} }); }else{ Ext.MessageBox.alert("警告", "数据没有被更新不需要保存!"); } } } },'-',{ text: "导出", iconCls : 'export-icon', handler :function(){ singleToExcel(grid); } },'-',{ text: "刷新", iconCls : "refresh-icon", handler :function(){ Ext.getCmp('years').setValue(currYear); Ext.getCmp('months').setValue(currMonth); var newUrl ="common/workload/workloadList!doGetListData.action"; grid.store.proxy.conn.url=newUrl; grid.store.load({ params : { start : 0, limit : 20, currYear : currYear, currMonth : currMonth } }); } },'->','注意:只能录入或修改本期工作量,否则输入值无效!' ] }); //创建一个可编辑的grid var grid = new Ext.grid.EditorGridPanel({ id:"grid", renderTo : "grid", //title : "", height : 547, width : 1180, cm : colM, store : store, items:[tb3], autoExpandColumn:true, //tbar:[] enableHdMenu:false,//是否显示表头的上下文菜单 clicksToEdit : 1 }); //grid.render(); //验证合法数据--(暂时没用到) var checkBlank=function(modified){ var result=true; Ext.each(modified,function(record){ var keys=record.fields.keys; Ext.each(keys,function(workload){ var value=record.data[workload]; var colIndex=cm.findColumnIndex(workload); //var rowIndex=grid.getStore().indexOfid(record.id); var editor=cm.getCellEditor(colIndex).field; var e=editor.validateValue(value); if(!r){ Ext.MessageBox.alert("验证","对不起你输入的数据不合法!"); result=false; return; } }); }); return result; } } /*导出excel*/ function singleToExcel(grid) { Ext.Msg.confirm("提示", "是否要导出", function f(btn) { if (btn == 'yes') { var proxy1 = grid.store.proxy; var url = proxy1.getUrl(); var reader1 = grid.store.reader; var newstore = new Ext.data.Store({ url : url, proxy : proxy1, reader : reader1 }); newstore.load({ params : { start : 0, limit : 20, currYear : currYear, currMonth : currMonth } }); //加载数据 var grid3 = new Ext.grid.GridPanel( { id : grid.id + 'excel', title :"工作量", store : newstore, cm : grid.getColumnModel(), sm : grid.sm, plugins : grid.plugins, view : grid.view }); var title = grid3.title; var vExportContent = getsingleXml(grid3); var fd = Ext.get('frmDummy'); if (!fd) { fd = Ext.DomHelper.append(Ext.getBody(), { tag : 'form', method : 'post', id : 'frmDummy', action : '/exportexcel/exportexcel.jsp', //target : '_blank', name : 'frmDummy', cls : 'x-hidden', cn : [{ tag : 'input', name : 'exportContent', id : 'exportContent', type : 'hidden' }, { tag : 'input', name : 'title', id : 'title', type : 'hidden' }] }, true); } fd.child('#exportContent').set({ value : vExportContent }); fd.child('#title').set({ value : title }); fd.dom.submit(); } }); } </script> <style type="text/css"> #ext-gen19 { display: none; } </style> </head> <s:hidden id="mid" value="1"></s:hidden> <input type="hidden" id="viewId" value=""></input> <body> <div id="grid" style="margin: -20px; padding:-10 -20;"> </div> </body>
相关文章推荐
- js把金额转换为大写的方式
- JSP学习笔记(八):jsp的脚本和声明的区别
- Javascript和python获取月份第一天和最后一天
- 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)
- Extjs6自学笔记之Sencha Cmd(一)
- Extjs6自学笔记之使用Sencha Cmd6建立工程项目(二)
- JavaScript语言精粹 笔记04 数组
- 一个简单的jsp+servlet实例,实现简单的登录
- JSON数据的解析
- js播放背景音乐
- JavaScript获取页面大小,滚动条位置,元素位置
- eclipse安装Aptana 插件,并设置使之能提示css,js,html,帮助编写代码
- js弹出框、对话框、提示框、弹窗汇总
- 了解 JavaScript (6)– 广告条(Banner)
- js图片放大
- js,在循环中添加事件,输出循环数 i 的值,i++与++i的问题
- Json解析
- JavaScript实现的经典文件树菜单效果
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- JavaScript高级程序设计笔记 事件冒泡和事件捕获