easyui行编辑(datagrid editors)
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web 开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
easyui下载地址:https://www.doczj.com/doc/2c13930576.html,/f/37092660.html,下载完后themes文件夹里的复制到WEB-INF下
demo是相应的api．
一.SubRegisterinfolistManager.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="https://www.doczj.com/doc/2c13930576.html,/jstl/core" prefix="c"%>
href="<%=request.getContextPath()%>/javascript/page/manages.css" type="text/css" rel="stylesheet">
">
二.SubRegisterinfolistManager.js(日志的看点),
这里用到一个JSON.stringify()方法，这是json2.js里的.
/**
* 获取原有数据条数
*/
var length ;
var uId;
var uIndex;
var buf;//
var status ;//0时说明没进行任何操作,为1时是保存添加的记录;为2时是保存修改的记录
var isUpdate;
var editIndex =undefined; //可以编辑的行索引
var fieldname =undefined; //可以列名称
$(function(){
loadgrid();
});
/**
* 加载CP数据
* @return
*/
function loadgrid() {
buf =true;
status =0;
isUpdate =true;
$('#CP').datagrid({
fit : true,// 最大化，自适应屏幕
collapsible : true,// 定义是否显示可折叠按钮。
loadMsg:"数据加载中,请稍后……",//在从远程站点加载数据的时候显示提示消息。
queryParams : { 'nickname':$('#nickname').combobox('getText'),
'status':$('#status').combobox('getValue'), 'createdate_1':$('#createdate_1').datebox('getValue'),
'createdate_2':$('#createdate_2').datebox('getValue')},//在请求远程数据的时候发送额外的参数。
striped:true,
singleSelect:true,
pagination : true,// 数据表格控件底部显示分页工具栏
rownumbers : true,// 显示数字
pageSize : 10,// 默认的页数
pageList : [ 10, 20, 30, 40 ],// 显示可以分页的list
idField : 'id',
url : contextpath +'/CP/Sub_registerinfolistFind',
columns : [ [{
field : 'nickname',
title : 'CP名称',
width : WidthSize(0.2),
sortable : true,
editor:{type:'validatebox',options:{required:true}}
},{
field : 'statusName',
title : '状态',
width : WidthSize(0.15),
sortable : true//hidden
},{
field : 'createdate',
title : '创建时间',
width : WidthSize(0.2),
sortable : true
}, {
field : 'loginname',
title : '登录名',
width : WidthSize(0.1),
editor:{type:'validatebox',options:{required:true}}
}, {
field : 'mobilenumber',
title : '联系电话',
width : WidthSize(0.17),
sortable : true,
editor:{type:'validatebox',options:{required:true,validType:'number[] '}}
}, {
field : 'onclick',
title : '操作',
width : WidthSize(0.1),
formatter: function(value,row,index){
return'修改 || '+
'删除';
}
}] ],
toolbar : [ {
id : 'btnadd',
text : '添加',
iconCls : 'icon-add',
handler : function() {
Sub_registerinfoAdd();
}
},{
id : 'btnremove',
text : '取消',
iconCls : 'icon-remove',
handler : function() {
var row = $('#CP').datagrid('getChecked');
removeit();
}
},{
id : 'btnrsave',
text : '保存',
iconCls : 'icon-save',
handler : function() {
Sub_registerinfoSave();
}
}]
});
}
//自适应宽度
function WidthSize(a) {
return document.body.scrollWidth * a;
}
/**
* 保存
* @return
*/
function Sub_registerinfoSave(){
if(status==1){
/**
* 从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。
* 当类型参数未配置的时候返回所有改变的行。
*/
$('#CP').datagrid('getChanges');
/**
* 结束编辑
*/
$('#CP').datagrid('selectRow',
editIndex).datagrid('beginEdit', editIndex).datagrid('endEdit', editIndex);
/**
* 提交所有从加载或者上一次调用acceptChanges函数后更改的数据。
*/
$('#CP').datagrid('acceptChanges');
/**
* validateRow 验证指定的行，当验证有效的时候返回true。
* endEditing() 结束单元格的编辑方法
*/
if($('#CP').datagrid('validateRow', editIndex) && endEditing()){
/**
* getRows 返回当前页的所有行。
*/
var rows =JSON.stringify($('#CP').datagrid('getRows'));
var url = contextpath+'/CP/Sub_registerinfoAddManage?rows='+rows+'&length='+len
gth;
$.messager.confirm('提示信息','确定添加吗?',function(r){
if (r){
$.post(url,function(da) {
if(da.success){
$.messager.alert('提示信息',da.message);
loadgrid();
}else{
$.messager.alert('提示信息
',data.message);
return ;
}
});
}
});
}
}else if(status==2){
isUpdate =false;//将修改的数据传到后台进行修改，为true则不进
行修改
Sub_registerinfoUpdate(uId,uIndex);
}else{
$.messager.alert('提示信息',"请进行添加或修改操作!");
}
}
/**
* 修改
* @param id
* @param index
* @return
*/
function Sub_registerinfoUpdate(id,index){
/**
* getChecked 在复选框呗选中的时候返回所有行。（该方法自1.3版开始可用）
* uncheckRow 取消勾选一行，行索引从0开始。（该方法自1.3版开始可用）
*/
if($('#CP').datagrid('getChecked').length==1&& isUpdate){
removeit();
$('#CP').datagrid('uncheckRow',index);//取消勾选一行，行索引从
0开始
}
uId = id;
uIndex = index;
status =2;
if(isUpdate){
if (endEditing()){
/**
* selectRow 选中指定行
* beginEdit 开始编辑
*/
$('#CP').datagrid('selectRow',
index).datagrid('beginEdit', index);
}
}else{
$('#CP').datagrid('endEdit', index);
$('#CP').datagrid('acceptChanges');
/**
* checkRow 勾选一行，行索引从0开始
*/
$('#CP').datagrid('checkRow',index);
if ($('#CP').datagrid('validateRow', index)){
/**
* getChecked 在复选框呗选中的时候返回所有行
* JSON.stringify() json2.js中的方法:将Object对象转换成String
*/
var rows = JSON.stringify($('#CP').datagrid('getChecked'));
var url = contextpath+'/CP/Sub_registerinfoUpdateManage?rows='+rows;
$.messager.confirm('提示信息','确定修改吗?',function(r){ if (r){
$.post(url,function(da) {
if(da.success){
$.messager.alert('提示信息',da.message); loadgrid();
}else{
$.messager.alert('提示信息',data.message);
return ;
}
});
}
});
}else{
isUpdate =true;
}
}
}
/**
* 删除
* @param id
* @return
*/
function Sub_registerinfoRemove(id){
var url = contextpath+'/CP/Sub_registerinfoDeleteManage?id='+id; $.messager.confirm('提示信息','确定删除吗?',function(r){ if (r){
$.post(url,function(da) {
if(da.success){
$.messager.alert('提示信息',da.message);
loadgrid();
}else{
$.messager.alert('提示信息',data.message);
return ;
}
});
}
});
}
/**
*结束单元格的编辑方法
*/
function endEditing(){
if (editIndex ==undefined){return true}
if ($('#CP').datagrid('validateRow', editIndex)){
// 组装数据
$('#CP').datagrid('endEdit', editIndex);
editIndex =undefined;
return true;
} else {
return false;
}
}
/**
*添加一条记录函数
*/
function Sub_registerinfoAdd(){
status =1;
if (endEditing()){
var index = $('#CP').datagrid('getRows').length-1;
if(buf){
length =$('#CP').datagrid('getRows').length;
buf=false;
}
var param ={status:0,statusName:'未激活',loginname:$("#username").val()};
$('#CP').datagrid('appendRow',param );
editIndex = index+1;
$('#CP').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
/**
*取消一条添加的记录函数
*/
function removeit(){
if(status ==1){
if (editIndex ==undefined){return}
var allRows = $('#CP').datagrid('getRows').length ;
if( allRows > length){
$('#CP').datagrid('cancelEdit', allRows -1 )
.datagrid('deleteRow', allRows -1);
}
if( length == $('#CP').datagrid('getRows').length){
status =0;
}
editIndex =undefined;
}else if(status ==2){
$('#CP').datagrid('cancelEdit', uIndex);
}
}
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value){
var re =new RegExp("^[0-9]{11}$");
return re.test(value);
},
message: '请输入正确的号码!'
}
});
/*
* 查询
*/
function CPSearch(){
loadgrid();
}
/**
* 重置
* @return
*/
function CPreset(){
$("#CPform").form('clear');
}
三,相关代码:
/**
*
* @Description: 添加
*
* @param model
* @param request
* @param response
* @param data
* @return
*
* @date 2013-11-7下午05:05:18
* @author LiQing
*/
@RequestMapping(value ="/CP/Sub_registerinfoAddManage") public@ResponseBody Map
Sub_registerinfoAddManage(Model model, HttpServletRequest request,
HttpServletResponse response,String length,String rows) { Sub_registerinfo[] sub_registerinfos =null;
int count =Integer.parseInt(length);
// 传到后台的数据
Map
// 将后台传回来的参数进行过滤，过滤后放到param中
try {
sub_registerinfos = JacksonUtils.objectMapper.readValue(rows,Sub_registerinfo[].class); List
List
for(int i=count;i sub_registerinfo.add(list.get(i)); } sub_registerinfoManagerMapperService.getSubregisterinfoInsert(sub_reg isterinfo); map.put("success", true); map.put("message", "添加成功!"); } catch (Exception e) { map.put("success", false); map.put("message", "添加失败!"); log.error(ExceptionUtils.getStackTrace(e)); log.error("添加失败!"); } return map; } /** * * @Description: 删除 * * @param model * @param request * @param response * @param length * @return * * @date 2013-11-8上午09:59:01 * @author LiQing */ @RequestMapping(value ="/CP/Sub_registerinfoDeleteManage") public@ResponseBody Map // 传到后台的数据 Map // 将后台传回来的参数进行过滤，过滤后放到param中 try { sub_registerinfoManagerMapperService.DeleteSub_registerinfo(id); map.put("success", true); map.put("message", "删除成功!"); } catch (Exception e) { map.put("success", false); map.put("message", "删除失败!"); log.error(ExceptionUtils.getStackTrace(e)); log.error("删除失败!"); } return map; } /** * * @Description: 修改 * * @param model * @param request * @param response * @param rows * @return * * @date 2013-11-8下午04:03:22 * @author LiQing */ @RequestMapping(value ="/CP/Sub_registerinfoUpdateManage") public@ResponseBody Map Sub_registerinfo[] sub_registerinfos =null; // 传到后台的数据 Map // 将后台传回来的参数进行过滤，过滤后放到param中 try { sub_registerinfos = JacksonUtils.objectMapper.readValue(rows,Sub_registerinfo[].class); List Arrays.asList(sub_registerinfos); System.out.println(list.get(0).getId()+"---------id------"); sub_registerinfoManagerMapperService.UpdateSub_registerinfo(list.get( 0)); map.put("success", true); map.put("message", "修改成功!"); } catch (Exception e) { map.put("success", false); map.put("message", "修改失败!"); log.error(ExceptionUtils.getStackTrace(e)); log.error("修改失败!"); } return map; } JacksonUtils.objectMapper.readValue()是jackson里的方法, 四,
相关主题
文本预览