easyui datagrid 添删改(纪录)
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 添删改(纪录)的更多相关文章
- Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
- 详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...
- asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL
效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...
- ASP.NET Easyui datagrid增删改+sqlhelper
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAFxCAYAAABtHZI7AAAgAElEQVR4nOy9DXwU1b3//wmCYHjUPl
- easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
- easyui datagrid 禁止选中行 EF的增删改查(转载) C# 获取用户IP地址(转载) MVC EF 执行SQL语句(转载) 在EF中执行SQL语句(转载) EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)
easyui datagrid 禁止选中行 没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- golang学习之beego框架配合easyui实现增删改查及图片上传
golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...
- 反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
随机推荐
- IOS第三方库 MARK
综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...
- ERP仓库管理系统查询(十)
需求: 1.根据仓库编号,获取仓库信息绑定至页面相关控件. 2.根据仓库编号,获取管理员信息绑定到页面相关控件 修改的界面: <%@ Page Language="C#" ...
- MonogoDB的GirdFS
GirdFS是一种在MongoDB中存储大二进制文件的机制. mongofiles内置在MongoDB发布版中,可以用来在GridFS中上传.下载.列示.查找或删除文件. $ echo "H ...
- 定时同步时间与crontab
date 月日时分年.秒date -s可以直接设置系统时间 比如将系统时间设定成1996年6月10日的命令如下.#date -s 06/10/96将系统时间设定成下午1点12分0秒的命令如下.#dat ...
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- 关于oracle出现ORA-06143:连接未打开 解决方案
原因:程序所在的路径中含有()和中文 用plsql连接正常,连接字符串也检查不出毛病,换到另一个程序照样使用,折腾了半天,最后才发现程序所在的路径中含有()和中文,所以可能导致出现这种很难排查的问题出 ...
- Disable Portrait in app
I had this problem as well as I wanted to constrain my game to only landscape mode. I put this in my ...
- MINIX3 导读分析
一个操作系统的分析是属于一个非常庞大的工程,操作系统就像是一个人造的 人,每一个模块想完全发挥功效,很有可能需要很多模块的支持才能够实现.所 以在分析 MINIX3 时,我认为同时看多个模块对于理解 ...
- 基于 OpenSSL 的 CA 建立及证书签发 【转】
建立 CA 建立 CA 目录结构 按照 OpenSSL 的默认配置建立 CA ,需要在文件系统中建立相应的目录结构.相关的配置内容一般位于 /usr/ssl/openssl.cnf 内,详情可参见 c ...
- 非常基础的css注意点
排版了很多页面,才发现自己忽视了一个很基本且重要的知识点: 一个div在一般的浏览器中,算它的width,要计算其content,padding,border. 但是在CSS中定义一个div的widt ...