var groups;//用户组为另一个表,所以需先加载,用于编辑时下拉框
var editindex = undefined;
var action;
$(function () {
$.ajax({
cache: false,
async: false,
type: "POST",
dataType: 'json',
url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=grouplist",
success: function (data) {
groups = data;//加载用户组json
}
});
list();
});

function list() {
$("#AdminList").datagrid({
width: 800,
height: 760,
title: '管理员列表',
url: '/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=list',
singleSelect: true,
pagination: true,
pageSize: 30,
pageList: [30, 50, 100],
idField: "id",
columns: [[
{ title: '编号', field: 'id', width: 40 },
{ title: '用户名', field: 'name', width: 150, editor: { type: 'validatebox',
options: { required: true, missingMessage: '不能为空' }//验证编辑框
}
},
{ title: '用户组', field: 'gid', width: 300, formatter: function (value) {
for (var i = 0; i < groups.length; i++) {
if (groups[i].gid == value) return groups[i].groupname;
}
return value;//用户组为另一个表,加载为用户组表的id,需格式化显示用户组名
}, editor: { type: 'combobox', options: { valueField: 'gid',
textField: 'groupname',
data: groups//编辑时用户组下拉框
}
}
},
{ title: '日期', field: 'data', width: 160 },
{ title: '操作', field: 'action', width: 140,
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="#" onclick="saverow(this)">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
]],
toolbar: [{
text: '增加',
iconCls: 'icon-add',
handler: function () {
insert();
}
}],
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);
}
});
var pager = $('#AdminList').datagrid('getPager'); // 分页
}

function updateActions(index) {//只允许一行编辑
if (endEditing()) {
$("#AdminList").datagrid('selectRow', index);
$('#AdminList').datagrid('updateRow', {
index: index,
row: {}
});
editindex = index;

} else {
$('#AdminList').datagrid('selectRow', editindex);
}
}
function endEditing() {
if (editindex == undefined) { return true; }
if ($('#AdminList').datagrid('validateRow', editindex)) {
$('#AdminList').datagrid('endEdit', editindex);
editindex = undefined; return true;
} else { return false; }
}
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
action = "Edit";
$('#AdminList').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
$.messager.confirm('Confirm', 'Are you sure?', function (r) {
if (r) {
var row = $('#AdminList').datagrid('getSelected');
if (row) {
$.ajax({
cache: false,
async: false,
type: "POST",
dataType: 'json',
url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=Del&id=" + row.id + "",
success: function (data) {
if (data > 0) {
$('#AdminList').datagrid('reload');
}
else {
$.messager.alert('Warning', '保存错误!');
}
}
});
}
$('#AdminList').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target) {
$('#AdminList').datagrid('endEdit', getRowIndex(target));
var row = $('#AdminList').datagrid('getSelected');
if (row) {
$.ajax({
cache: false,
async: false,
type: "POST",
dataType: 'json',
url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=" + action + "&id=" + row.id + "&name=" + row.name + "&gid=" + row.gid,
success: function (data) {
if (data > 0) {
$('#AdminList').datagrid('reload');
}
else {
$.messager.alert('Warning', '保存错误!');
}
}
});
}

}
function cancelrow(target) {
$('#AdminList').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
if (endEditing()) {
// var row = $('#AdminList').datagrid('getSelected');
// if (row) {
// var index = $('#tt').datagrid('getRowIndex', row);
// } else {
index = 0;//添加新内容,只插入到第一行
// }
$('#AdminList').datagrid('insertRow', {
index: index,
row: {
status: 'P'
}
});
action = "Add";
$('#AdminList').datagrid('selectRow', index);
$('#AdminList').datagrid('beginEdit', index);
editindex = undefined;

}
}

由 http://www.jeasyui.com/tutorial/datagrid/datagrid12.php 修改

未解决:先点击添加,后另点击编辑时,添加的新行未删除(思考中。。。)

easyui datagrid 添删改(纪录)的更多相关文章

  1. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  2. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  3. asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL

    效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...

  4. ASP.NET Easyui datagrid增删改+sqlhelper

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAFxCAYAAABtHZI7AAAgAElEQVR4nOy9DXwU1b3//wmCYHjUPl

  5. easyui datagrid 增删改查示例

    查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...

  6. easyui datagrid 禁止选中行 EF的增删改查(转载) C# 获取用户IP地址(转载) MVC EF 执行SQL语句(转载) 在EF中执行SQL语句(转载) EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)

    easyui datagrid 禁止选中行   没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...

  7. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

  8. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  9. 反射实体自动生成EasyUi DataGrid模板

    用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...

随机推荐

  1. Python学习路程day6

    shelve 模块 shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 import shelve d = shelve.open ...

  2. The ShortCuts in the ADT (to be continued)

    1. automatically add all the namespace which need to be include in the class. ctrl+shift+o

  3. Python变量与常量

    变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变.基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中.常量是一块只读的内存区域,常量一旦被初始化就不能被 ...

  4. 用云存储和CDN轻松搞定网站图片

    http://www.kuqin.com/web/20120207/317912.html

  5. flex+java实现文件的上传

    flex前端代码: <?xml version="1.0" encoding="utf-8"?><s:BorderContainer xmln ...

  6. ERROR 1130: Host ’...′ is not allowed to connect to this MySQL server

    /******************************************************************** * ERROR 1130: Host ’...′ is no ...

  7. cocosbuilder3.0使用小记

    新项目用到了堪称完美的cocos2d-x2.1.5版本,用cocsbuilder2.1版本出现了返回的最终node为null的问题,看xcode的提示说: cocos2d: WARNING! Inco ...

  8. OpenHCI - Open Host Controller Operational Registers

    The Host Controller (HC) contains a set of on-chip operational registers which are mapped into a non ...

  9. apt-get 的常用使用说明

    API神命令: apt-get -h >>help.txt apt 1.0.10.2ubuntu1,用于 amd64 体系结构,编译于 Oct 5 2015 15:55:05用法: apt ...

  10. Xcode编译异常和警告汇总(持续更新中)

    1.Method definition for 'xxx' not found xxx的方法没有实现 出现原因.h声明了xxx方法但是.m没有实现xxx方法 解决方法:在类的.m文件实现xxx方法   ...