easyui datagrid edit by click save all at one time

easyui datagrid can edit directly. There’s simples at it’s website, here’s another simple example. Different to before post, this one will save edited rows at one time by click a button.

<%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.sun.com/jstl/core_rt&#8221; prefix=”c”%>
<%@ taglib prefix=”s” uri=”/struts-tags” %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
String orgname = (String) request.getSession().getAttribute(“session_orgname”);
%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<base href=”<%=basePath%>”>

<title>派工单完成确认</title>

<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/demo.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/default/easyui.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/icon.css”/>” rel=”stylesheet” type=”text/css” />
<script src=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/jquery-1.6.min.js”/>”></script>
<script src=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/jquery.easyui.min.js”/>”></script>
<script src=”<c:url value=”/tg/commons/easyui/locale/easyui-lang-zh_CN.js”/>”></script>

<script type=”text/javascript”>
var orgname = “<%=orgname%>”;
function searchList(){
var q_begindate = $(‘#q_beginTime’).datetimebox(‘getValue’);
var q_enddate =$(‘#q_endTime’).datetimebox(‘getValue’);
var q_person = $(‘#q_person’).val();
//var q_docno = $(‘#q_docno’).val();
var q_status = $(‘#q_status’).is(“:checked”);

$(‘#dg’).datagrid(‘reload’,{ //重新载入datagrid
“qo[‘q_begindate’]”:q_begindate,
“qo[‘q_enddate’]”:q_enddate,
“qo[‘q_person’]”:q_person,
//”qo[‘q_docno’]”:q_docno,
“qo[‘q_status’]”:q_status
});
var ntit=orgname+’ 派工完成确认’;
if(q_enddate!=null){
ntit=q_enddate+’ ‘+ntit;
}
if(q_begindate!=null){
ntit=q_begindate+’/ ‘+ntit;
}
$(‘#dg’).datagrid({
title:ntit
});
}

var actionUrl;
function addry(){
var strdate = new Date();
var stryear = strdate.getFullYear();
var strmonth = strdate.getMonth() + 1;
var strday = strdate.getDate();
var strhour = strdate.getHours();
var strminute = strdate.getMinutes();
var strsecond = strdate.getSeconds();
var upltime = stryear+’-‘+strmonth+’-‘+strday+’ ‘+strhour+’:’+strminute+’:’+strsecond;
$(‘#myform’).form(‘clear’);
$(‘#formdate’).datetimebox(‘setValue’,upltime);
$(‘#dlg’).dialog(‘setTitle’, ‘新增问题’).dialog(‘open’);
actionUrl = ‘<c:url value=”/nnmis/view/scgl/addXzwtPgd.tg”/>’;
}

function saveItem(){
$(‘#myform’).form(‘submit’, {
url:actionUrl,
onSubmit: function(){
return $(‘#myform’).form(‘validate’);
},
success: function(data){
$(‘#qtdg’).datagrid(‘reload’);
data=eval(‘(‘+data+’)’);
if(data.success){
$.messager.show(
{
title:’提示’,
msg:’操作成功!’,
showType:’slide’
}
);
$(‘#dlg’).dialog(‘close’);
}
if(data.error){
var messsage=’操作失败!’;
if(data.message!=null){
message=data.message;
}
$.messager.alert(‘提示’,message,’error’);
}
}
});
}

function deletery(){
var row = $(‘#qtdg’).datagrid(‘getSelected’);
if(row){
$.messager.confirm(‘警告’,’您确认要删除吗?’,function(bt){
if(bt){
$.ajax({
url:'<c:url value=”/nnmis/view/scgl/deleteXzwtPgd.tg?id=’ + row.id +'”/>’,
datatype: ‘json’,
success: function(data){
data = eval(‘(‘+data+’)’);
if(data.success){
var message=’删除成功!’;
if(data.message){
message=data.message;
}
$.messager.show({
title:’提示’,
msg:message,
showType:’slide’
});
$(‘#qtdg’).datagrid(‘reload’);
}else{
var message=’删除失败!’;
if(data.message){
message=data.message;
}
$.messager.alert(‘提示’,message,’error’);
}
}
});
}
});
}else{
$.messager.alert(‘提示’,’请选择要删除的记录!’,’error’);
}
}

//add numberspinner into datagrid.
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
init: function(container, options){
var input = $(‘<input type=”text”>’).appendTo(container);
return input.numberspinner(options);
},
destroy: function(target){
$(target).numberspinner(‘destroy’);
},
getValue: function(target){
return $(target).numberspinner(‘getValue’);
},
setValue: function(target, value){
$(target).numberspinner(‘setValue’,value);
},
resize: function(target, width){
$(target).numberspinner(‘resize’,width);
}
},
empty:{
init: function(container, options){
return $(‘<div style=”padding:0 4px”></div>’).appendTo(container);
},
getValue: function(target){
return $(target).html();
},
setValue: function(target, value){
$(target).html(value);
}
},
radiobox:{
init: function(container,options){
var input = $(‘<input type=”radio” name=”radio” value=”1″/>按设备&nbsp;<input type=”radio” name=”radio” value=”2″/>按任务&nbsp;’).appendTo(container);
return input;
},
getValue:function(target){
return $(target).val();
},
setValue:function(target,value){
$(target).val(value);
},
resize: function(target, width){
$(target).numberspinner(‘resize’,width);
}
}
});
var editIndex = undefined;
$(function(){
$(‘#dg’).datagrid({
title: orgname+’ 派工完成确认’,
columns: [[{
field:’id’,hidden:true
},{
field:’pgdate’,title:’派工日期’,width:”130″
},{
field:’lianluoyuan’,title:’车站(驻站员)’,width:”130″
},{
field:’zuoyeren’,title:’作业人’,width:”130″
},{
field:’type’,title:’类型’,width:”80″
},{
field:’neirong’,title:’作业内容’,width:”230″
},{
field:’wcqk’,title:’是否完成’,width:”210″,
formatter:function(value){
if(value==’0′){
return ‘未完成’;
}
if(value==’1′){
return ‘已完成’;
}
if(value==’2′){
return ‘未作业’;
}
},
editor:{
type:’combobox’,
options:{
valueField:’value’,
textField:’text’,
data:[{‘text’:’未完成’,’value’:’0′},
{‘text’:’已完成’,’value’:’1′},
{‘text’:’未作业’,’value’:’2′}]
}
}
},{
field:’itable’,title:’来源’,hidden:true
},{
field:’cnt’,title:’完成个数’,width:”110″,
editor:{
type:’numberspinner’,
min:0
}
},{
field:’shuoming’,title:’作业情况说明’,width:”210″
}/*,{
field:’action’,title:’操作’,width:’130′,
formatter:function(value,row,index){
if (row.editing){
var s = ‘<a href=”javascript:void()” onclick=”saverow(this,’+index+’)”>保存</a>’;
var nbsp = “&nbsp;&nbsp;&nbsp;&nbsp;”;
var c = ‘<a href=”javascript:void()” onclick=”cancelrow(this)”>取消</a>’;
return s+nbsp+c;
} else {
var e = ‘<a href=”javascript:void()” onclick=”editrow(this,’+index+’)”>编辑</a> ‘;
return e;
}
}
}*/]],
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onClickRow:function(index,data){
if(editIndex == undefined){
$(‘#dg’).datagrid(‘beginEdit’, index);
var ed = $(‘#dg’).datagrid(‘getEditor’, {index:index,field:’cnt’});
var rows = $(‘#dg’).datagrid(‘getRows’);
var row=rows[index];
if(row.itable==’d’){
$(ed.target).attr(‘disabled’,true);
}
editIndex = index;
}else if(editIndex != index){
$(‘#dg’).datagrid(‘endEdit’, editIndex);
$(‘#dg’).datagrid(‘beginEdit’, index);
var ed = $(‘#dg’).datagrid(‘getEditor’, {index:index,field:’cnt’});
var rows = $(‘#dg’).datagrid(‘getRows’);
var row=rows[index];
if(row.itable==’d’){
$(ed.target).attr(‘disabled’,true);
}
editIndex = index;
}
}
});
$(‘#qtdg’).datagrid({onClickRow:function(index,data){
var row=$(‘#qtdg’).datagrid(‘getSelected’);
}});
})

function updateActions(index){
$(‘#dg’).datagrid(‘updateRow’,{
index: index,
row:{}
});
}

function getRowIndex(target){
var tr = $(target).closest(‘tr.datagrid-row’);
return parseInt(tr.attr(‘datagrid-row-index’));
}

function editrow(target,index){
$(‘#dg’).datagrid(‘beginEdit’, getRowIndex(target));
var ed = $(‘#dg’).datagrid(‘getEditor’, {index:index,field:’cnt’});
var rows = $(‘#dg’).datagrid(‘getRows’);
var row=rows[index];
if(row.itable==’d’){
$(ed.target).attr(‘disabled’,true);
}
}

function saverow(target,index){
$(‘#dg’).datagrid(‘endEdit’, getRowIndex(target));
var rows = $(‘#dg’).datagrid(‘getRows’);
var row=rows[index];
$.ajax({
url:'<c:url value=”/nnmis/view/scgl/updatewcqkPgd.tg?selid=’ + row.id
+’&wcqk=’ + escape(row.wcqk) + ‘&cnt=’ + row.cnt + ‘&itable=’ + row.itable + ‘”/>’,
datatype: ‘json’,
success: function(data){
data = eval(‘(‘+data+’)’);
if(data.success){
var message=’修改成功!’;
if(data.message){
message=data.message;
}
$.messager.show({
title:’提示’,
msg:message,
showType:’slide’
});
$(‘#dg’).datagrid(‘reload’);
}else{
var message=’修改失败!’;
if(data.message){
message=data.message;
}
$.messager.alert(‘提示’,message,’error’);
}
}
});
}

function cancelrow(target){
$(‘#dg’).datagrid(‘cancelEdit’, getRowIndex(target));
}

function savewcqr(){
if(editIndex != undefined){
$(‘#dg’).datagrid(‘endEdit’, editIndex);
editIndex = undefined
}
var changerows = $(‘#dg’).datagrid(‘getChanges’, “updated”);
if(changerows!=null){
var json = “[“;
for(var i=0;i<changerows.length;i++){
var tem = changerows[i];
if(tem.wcqk != null && tem.wcqk.length>0){
json = json + “{\”itable\”:\”” + tem.itable + “\”,\”id\”:\”” + tem.id
+ “\”,\”wcqk\”:\”” + tem.wcqk + “\”,\”cnt\”:\”” + tem.cnt + “\”},”;
}
}
if(json.length > 2){
json = json.substring(0,json.length-1);
}
json = json + “]”;
$.ajax({
url:'<c:url value=”/nnmis/view/scgl/updatelistPgd.tg?json=’ + json + ‘”/>’,
datatype: ‘json’,
success: function(data){
data = eval(‘(‘+data+’)’);
if(data.success){
var message=’修改成功!’;
if(data.message){
message=data.message;
}
$.messager.show({
title:’提示’,
msg:message,
showType:’slide’
});
$(‘#dg’).datagrid(‘reload’);
}else{
var message=’修改失败!’;
if(data.message){
message=data.message;
}
$.messager.alert(‘提示’,message,’error’);
}
}
});
}
}
</script>
</head>

<body>
<div id=”TC” class=”easyui-layout” style=” border: 2px; height: 100%; width:100%; background:#DCDCDC;”>
<div region=”north” style=”border:0px; height: 50px;width:100%”>
<form id=”query_form” method=”post”>
<table border=”0″ cellspacing=”4″>
<tr><td align=”left” width=”50px”>按日期: </td>
<td align=”left” width=”30px”>开始: </td>
<td align=”left”><input id=”q_beginTime” class=”easyui-datebox” style=”width:130px”> </td>
<td align=”left” width=”30px”>结束: </td>
<td align=”left”><input id=”q_endTime” class=”easyui-datebox” style=”width:130px”> </td>
<td align=”left” width=”40px”>按人:</td>
<td align=”left”><input id=”q_person” type=”text”></td>
<!– <td align=”left” width=”40px”>按单号: </td>
<td align=”left”><input id=”q_docno” type=”text”></td> –>
<td align=”left”><input id=”q_status” type=”checkbox” value=”1″ />只看未完成 </td>
<td align=”left” width=”30px”>&nbsp;</td>
<td align=”left”><a href=”javascript:void(0);” class=”easyui-linkbutton” iconCls=”icon-search” onclick=”searchList()”>查询</a> </td>
</tr>
</table>
</form>
</div>
<div region=”center” style=”border:0px; height:100%;width:100%; “>
<div id=”pgtool” style=”height: auto”>

<a href=”javascript:void(0)” class=”easyui-linkbutton”
data-options=”iconCls:’icon-save’,plain:true” onclick=”savewcqr()”>保存</a>
</div>
<div style=”position:absolute;top:0px;bottom:0px;width:100%; “>
<table id=”dg”
singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”true” pageSize=”100″
fit=”true” toolbar=”#pgtool” url=”<c:url value=’/nnmis/view/scgl/wcqkPgd.tg’/>”>
<thead>
<tr>

</tr>
</thead>
</table>
</div>
</div>
<div region=”south” style=”border:0px; height:300px;width:100%;” split=”true”>
<div style=”position:absolute;top:0px;bottom:0px;width:100%; “>
<div id=”tool”>
<a href=”javascript:void()” class=”easyui-linkbutton” iconCls=”icon-add” plain=”true” onclick=”addry()”>新增记录</a>
<a href=”javascript:void()” class=”easyui-linkbutton” iconCls=”icon-cancel” plain=”true” onclick=”deletery()”>删除记录</a>
</div>
<table id=”qtdg” title=”新增问题” singleSelect=”true” style=”width:100%,height:100%” rownumbers=”true” border=”true” pagination=”false” pageSize=”100″
fit=”true” toolbar=”#tool” url=”<c:url value=’/nnmis/view/scgl/xzwtPgd.tg’/>”>
<thead>
<tr>
<th field=”id” width=”80″ hidden=”true”></th>
<th field=”bianhao” width=”410″ sortable=”true”>编号</th>
<th field=”dengji” width=”130″ sortable=”true”>级别</th>
<!– <th field=”equname” width=”130″ sortable=”true”>设备名</th> –>
<th field=”miaoshu” width=”130″ sortable=”true”>问题描述</th>
<th field=”yqsj” width=”110″ sortable=”true”>整改期限</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

<div id=”dlg” style=”width: 400px; height: 250px;” class=”easyui-dialog” closed=”true” modal=”true” buttons=”#dlg-buttons”>
<div style=”padding-left: 10px; padding-top: 10px;”>
<div style=”float: center”>
<form id=”myform” method=”post” style=”margin: 0; padding: 0″ enctype=”multipart/form-data”>
<table>
<tr>
<td style=”width: 60px”>问题站点</td>
<td>
<input id=”formstation” name=”rgVo.didian” valueField=”id” textField=”name” class=”easyui-combobox” required=”true”
style=”width: 180px;” url=”<c:url value=’/nnmis/view/sys/findStationUnderOrgSTACOMB.tg’/>”></input>
</td>
</tr>
<tr>
<td style=”width: 60px”>问题描述</td>
<td>
<textarea id=”formdesc” name=”rgVo.miaoshu” class=”easyui-validatebox” style=”width:180px”></textarea>
</td>
</tr>
<tr>
<td style=”width: 60px”>问题定性</td>
<td>
<select id=”formlevel” class=”easyui-combobox” name=”rgVo.dengji” style=”width:180px”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
</td>
</tr>
<tr>
<td style=”width: 60px”>录入时间 </td>
<td>
<input id=”formdate” name=”rgVo.jiludate” class=”easyui-datetimebox” style=”width:180px”></input>
</td>
</tr>
</table>
</form>
</div>
<div style=”clear: both”></div>
</div>
<div id=”dlg-buttons” style=”text-align: center;”>
<a href=”javascript:void()” class=”easyui-linkbutton” iconCls=”icon-save” onclick=”javascript:saveItem()”>保存</a>
<a href=”javascript:void()” class=”easyui-linkbutton” iconCls=”icon-cancel” onclick=”javascript:$(‘#dlg’).dialog(‘close’)”>关闭</a>
</div>
</div>
</body>
</html>

Snap1

 

 

This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s