您的位置:首页 > Web前端 > JavaScript

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: