easyui datagrid edit simple example

easyui的datagrid现在支持直接编辑。目前官方支持了text, combo, checkbox控件。

<%@ 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 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);
}
}
});

$(function(){
$(‘#dg’).datagrid({
title: orgname+’ 派工完成确认’,
columns: [[{
field:’id’,hidden:true
},{
field:’lianluoyuan’,title:’车站(驻站员)’,width:”130″
},{
field:’zuoyeren’,title:’作业人’,width:”130″
},{
field:’neirong’,title:’作业内容’,width:”230″
},{
field:’wcqk’,title:’是否完成’,width:”210″,
formatter:function(value){
if(value==’0′){
return ‘否’;
}
if(value==’1′){
return ‘是’;
}
},
editor:{
type:’combobox’,
options:{
valueField:’value’,
textField:’text’,
data:[{‘text’:’未完成’,’value’:’0′},
{‘text’:’已完成’,’value’:’1′},
{‘text’:’未作业’,’value’:’2′}]
}
}
},{
field:’type’,title:’类型’,hidden:true
},{
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){
var row=$(‘#dg’).datagrid(‘getSelected’);
var rindex = $(‘#dg’).datagrid(‘getRowIndex’,row);
$(‘#dg’).datagrid(‘beginEdit’, rindex);
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);
}
}
});
$(‘#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));
}
</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 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” 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=”true” 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 Uncategorized. 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