easyui datagrid editgrid 可编辑datagrid(8)

来源：互联网发布：谷歌优化的缺点编辑：程序博客网时间：2024/04/27 09:17

1.源码

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>可编辑的datagrid</title>    <link rel="stylesheet" href="./css/login.css"/>    <link rel="stylesheet" type="text/css" href="./../js/easyui/themes/bootstrap/easyui.css"><link rel="stylesheet" type="text/css" href="./../js/easyui/themes/icon.css"><script type="text/javascript" src="./../js/easyui/jquery.min.js"></script><script type="text/javascript" src="./../js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="./../js/easyui/locale/easyui-lang-zh_CN.js"></script>     <style>        html,body{width:100%;}    </style></head><body><div id="dd" style="height:400px;"></div><script type="text/javascript">$(function () {var datagrid; //定义全局变量datagridvar editRow = undefined; //定义全局变量：当前编辑的行datagrid = $("#dd").datagrid({url :"./action", //请求的数据源iconCls : 'icon-save', //图标pagination : true, //显示分页pageSize : 15, //页大小pageList : [ 15, 30, 45, 60 ], //页大小下拉选项此项各value是pageSize的倍数fit : true, //datagrid自适应宽度fitColumn : false, //列自适应宽度striped : true, //行背景交换nowap : true, //列内容多时自动折至第二行border : false,idField : 'ID', //主键columns : [ [//显示的列{field : 'ID',title : '编号',width : 100,sortable : true,checkbox : true}, {field : 'itemType',title : '用户名',width : 100,sortable : true,editor : {type : 'validatebox',options : {required : true}}}, {field : 'RealName',title : '状态',width : 100,formatter:function(value,row){if(value==undefined){return "正常";}else{if(value=="1"){return "异常";}else{return "正常";}}},editor:{type:'combobox',options:{valueField:'itemResult',textField:'itemResultContent',data:[{"itemResult":"1","itemResultContent":"异常"},{"itemResult":"0","itemResultContent":"正常"}],required:true}}}, {field : 'Email',title : '邮箱',width : 100,editor : {type : 'validatebox',options : {required : true}}} ] ],queryParams : {"itemtype":"901","taskid":"69"}, //查询参数toolbar : [{text : '添加',iconCls : 'icon-add',handler : function() {//添加列表的操作按钮添加，修改，删除等//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑if (editRow != undefined) {datagrid.datagrid("endEdit",editRow);}//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行if (editRow == undefined) {datagrid.datagrid("insertRow",{index : 0, // index start with 0row : {}});//将新插入的那一行开户编辑状态datagrid.datagrid("beginEdit",0);//给当前编辑的行赋值editRow = 0;}}},'-',{text : '删除',iconCls : 'icon-remove',handler : function() {//删除时先获取选择行var rows = datagrid.datagrid("getSelections");//选择要删除的行if (rows.length > 0) {$.messager.confirm("提示","你确定要删除吗?",function(r) {if (r) {var ids = [];for (var i = 0; i < rows.length; i++) {ids.push(rows[i].ID);}//将选择到的行存入数组并用,分隔转换成字符串，//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的idalert(ids.join(','));}});} else {$.messager.alert("提示","请选择要删除的行", "error");}}},'-',{text : '保存',iconCls : 'icon-save',handler : function() {//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台datagrid.datagrid("endEdit",editRow);   alert("保存处理");}}, '-', {text : '取消编辑',iconCls : 'icon-redo',handler : function() {//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行editRow = undefined;datagrid.datagrid("rejectChanges");datagrid.datagrid("unselectAll");}}, '-' ],onAfterEdit : function(rowIndex, rowData, changes) {//endEdit该方法触发此事件console.info(rowData);editRow = undefined;},onDblClickRow : function(rowIndex, rowData) {//双击开启编辑行if (editRow != undefined) {datagrid.datagrid("endEdit", editRow);}if (editRow == undefined) {datagrid.datagrid("beginEdit", rowIndex);editRow = rowIndex;}}});});</script></body></html>

2.效果

0 0