DataGrid--多记录CRUD
最近在做一个datagrid，但因为引用的Jquery，加上初学者，所以难免费尽周折。现在将完整版贴出来，跟大家分享，一起切磋，也方便自己回顾学习。
ps:第一次发帖，不知排版效果如何，瑕疵勿怪。
首先是Optdatagrid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格operateDataGrid表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<link rel="stylesheet" href="./easyui.css" type="text/css"></link>
<link rel="stylesheet" href="./icon.css" type="text/css"></link>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easyui.min.js"></script>
<!-- 引入中文资源Դ -->
<script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="./optDataGrid.js"></script>
<script type="text/javascript">
//设置datagrid自适应Ӧ
$(window).resize(function () {
$('#dataGrid').datagrid('resize')
});
</script>
</head>
<body>
<h3>测试增、删、改所用表格</h3>
<div width="100%">
<div>
<a href="#" id="01" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>
</div>
<table id="dataGrid"></table>
</div>
<script>
function doSearch(){
var mydata;
var str =" select * from Userinfo;";
$("#01").click(function(){
$.ajax({
url: "http://127.0.0.1:9999/zhangdaicong/crud",
type: "post",
data:{sql:str},
async: false,
dataType: "json",
success: function (result) {
console.info(result);
mydata=result;
}
});
$('#dataGrid').datagrid('loadData',mydata);
});
}
</script>
</body>
</html>
接下来是OptDataGrid.js
var dataGridOper;
//定义右键点击时选择的行
var rightIndex = -1;
$.extend($.fn.datagrid.methods, {
//增加时有编辑框
//第一个参数组件本身，第二个参数要传递的参数
addEditor: function(jq, param){
if (param instanceof Array) {
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
}
else {
var e = $(jq).datagrid('getColumnOption', param.field)
e.editor = param.editor;
}
},
//修改时没编辑框
//编辑时使用可以跳过指定的列编辑,对某些列不需要编辑
// 如 datagrid('removeEditor','password')，不让编辑密码
removeEditor: function(jq, param){
if (param instanceof Array) {
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
}
else {
var e = $(jq).datagrid('getColumnOption', param)
e.editor = {};
}
}
})
/**
* 扩展datagrid的列editor
* @param {Object} container
* @param {Object} options
*/
$.extend($.fn.datagrid.defaults.editors, {
//扩展datatimebox
datetimebox: {
init: function(container, options){
//初始化datatimebox
var input = $('<input />').appendTo(container);
//不可输入
options.editable = false;
input.datetimebox(options);
return input;
},
getValue: function(target){
return $(target).datatimebox('getValue');
},
setValue: function(target, value){
$(target).datatimebox('setValue', value);
},
resize: function(target, width){
$(target).datatimebox('resize', width);
},
destroy: function(target){
//销毁datetimebox弹出的panel
$(target).datatimebox('destroy');
}
},
//单选框
radioButton: {
init: function(container, options){
//初始化datatimebox
var input = $('<input type="radio" name="radio" value="M" />男 <input type="radio" name="radio" value="F" />女 ').appendTo(container);
return input;
},
getValue: function(target){
alert($(target).val())
return $(target).val();
},
setValue: function(target, value){
$(target).val(value);
},
resize: function(target, width){
}
}
});
/*
//js获取项目根路径，如： http://localhost:8088/jquery
function getRootPath(){
//获取当前网址，如： http://localhost:8088/jquery/easyui/login.jsp
var curWwwPath = window.document.location.href;
//获取主机地址之后的目录，如： jquery/easyui/login.jsp
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8088
var localhostPaht = curWwwPath.substring(0, pos);
//获取带"/"的项目名，如：/jquery
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPaht + projectName);
}*/
$(function(){
operateDataGrid();
});
var operateDataGrid = function(){
//用于存放操作记录
var operator = "";
//存放编辑的行号
var editorRow = -1;
dataGridOper = $('#dataGrid').datagrid({
// url: "http://127.0.0.1:9999/zhangdaicong/crud",
// method: 'post',
title: '用户信息表',
fitColumns: true,
width: '100%',
height: 335,
loadMsg: 'loading',
striped: true,
//idField: 'oid',
rownumbers: true,
//设置默认排序字段
sortName: 'username',
columns: [[{
field: 'oid',
title: '编号',
width: 100,
align: 'center',
//设置可以排序，则不显示此列
checkbox: true
}, {
field: 'username',
title: '姓名',
width: 100,
align: 'center',
//设置可以排序
sortable: true,
editor: {
//string,object string 时指编辑类型，当 object 是options：对象，编辑类型对应的编辑器选项
type: 'validatebox',
options: {
required: true
}
}
}, {
field: 'gender',
title: '性别',
width: 100,
align: 'center',
sortable: true,
editor: {
//string,object
type: 'validatebox'
},
formatter: function(value, rowData, rowIndex){
return (($.trim(value) == "F") ? "woman" : "man");
}
}, {
field: 'phone',
title: '联系电话',
width: 100,
align: 'center',
sortable: true,
editor: {
//string,object
//type: 'datetimebox',
type: 'text',
options: {
required: true
}
}
}]],
pagination: true,
//工具栏，每个都是一个LinkButton
toolbar: [{
id: 'idAdd',
text: '添加 ',
iconCls: 'icon-add',
plain: 'true',
//按钮事件
handler: function(){
//控制一次只能添加一行
//if (editorRow == -1) {
//增加时可以对用户名进行编辑
dataGridOper.datagrid('addEditor', {
field: 'username',
editor: {
//string,object string 时指编辑类型，当 object 是options：对象，编辑类型对应的编辑器选项
type: 'validatebox',
options: {
required: true
}
}
});
operator = "insertData";
//在第一行增加
dataGridOper.datagrid('insertRow', {
//index：插入进去的行的索引，如果没有定义，就追加此新行,row：行的数据
index: 0,
row: {
//初始化的数据
username: '请输入姓名',
gender: '输入性别',
phone: '输入电话'
}
});
//队列进行编辑时必须在columns中列设置editor属性
//开始第一行进行编辑,参数index 索引
dataGridOper.datagrid('beginEdit', 0);
editorRow = 0;
/*
此处是补充功能：获取修改的行，将其保存到数组中然后传给后台。
var row = $('#dataGridOper').datagrid("selectRow",0).datagrid("getSelected");
console.info(row);*/
// }
// else {
// $.messager.alert('提示', '请先保存正在修改的数据', 'warning');
// dataGridOper.datagrid('endEdit', editorRow);
// }
}
}, '-', {
id: 'idDelete',
text: '删除',
disabled: true,
iconCls: 'icon-remove',
//按钮事件
handler: function(){
//获取选中的行数
var rows = dataGridOper.datagrid('getSelections');
if (rows.length > 0) {
//存放选中行的id
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push("oid="+rows[i].oid);
}
//var deletedata={};
//deletedata["myarr"] =ids;
var str = JSON.stringify(ids);
var str1 = "{'list':"+str+"}";
console.info(str1);
//调用后台删除
$.ajax({
url:"http://127.0.0.1:9999/zhangdaicong/crud/delete",
type: "post",
data: {deletedata:str1},
async: false,
dataType:"json",
success:function(msg){
console.info(msg);
//alert(msg);
if (msg =='{a=6}') {
//title, msg, icon, fn
$.messager.alert('系统提示', '删除数据成功！', 'info', function(btn){
//回调函数
dataGridOper.datagrid('load');
});
}
else
if (msg == 'noData') {
$.messager.alert('系统提示', '请选择要删除的数据 ', 'warning')
}
else {
$.messager.alert('系统提示', '删除成功：001', 'error')
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$.messager.alert('系统提示', '删除失败，错误代码：003' + textStatus, 'info')
}
})
}
else {
//title, msg, icon, fn
$.messager.alert('系统提示', '请选择要保存的数据 ', 'info');
}
}
}, '-', {
id: 'idEdit',
text: '修改',
iconCls: 'icon-edit',
disabled: true,
handler: function(){
//控制一次只能编辑一行
var rows2 = dataGridOper.datagrid('getSelections');
//console.info(rows2[0]);
//一次只能编辑一行
if (rows2.length == 1) {
//判断是否有其他行正在编辑
if (editorRow == -1) {
//不让编辑用户名
//dataGridOper.datagrid('removeEditor', ['username','']); 传多个对象
dataGridOper.datagrid('removeEditor', 'username');
//返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值
var index1 = dataGridOper.datagrid('getRowIndex', rows2[0]);
operator = "updateData";
//在第一行增加
//队列进行编辑时必须在columns中列设置editor属性
//开始对一行进行编辑,参数index 索引
dataGridOper.datagrid('beginEdit', index1);
editorRow = index1;
}
else {
$.messager.confirm('提示', '是否保存正在修改的数据？ ', function(btn2){
//点击确定则保存,否则取消
if (btn2) {
dataGridOper.datagrid('endEdit', editorRow);
//设置当前无正在编辑的行
editorRow = -1;
}
});
}
}
else {
$.messager.alert('提示', '每次只能对一行进行编辑', 'warning');
}
}
}, '-', {
id: 'idSave',
text: '保存',
iconCls: 'icon-save',
//disabled: true,
handler: function(){
//结束对第一行进行编辑,参数index 索引
if (editorRow != -1) {
dataGridOper.datagrid('endEdit', editorRow);
}
}
}, '-', {
id: 'idCancle',
text: '放弃编辑',
iconCls: 'icon-undo',
//disabled: true,
handler: function(){
//获取总数
var paper = dataGridOper.datagrid('getPager');
var total = paper.pagination('options').total;
//回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据
dataGridOper.datagrid('rejectChanges');
//重新设置总数
paper.pagination({total:total});
editorRow = -1;
//取消选中时，则删除，修改按钮不可用
$('#idDelete').linkbutton('disable');
$('#idEdit').linkbutton('disable');
}
}, '-'],
onSelect: function(rowIndex, rowData){
//选中时，则删除，修改按钮可用
$('#idDelete').linkbutton('enable');
$('#idEdit').linkbutton('enable');
},
onSelectAll: function(rows){
//选中时，则删除，修改按钮可用
$('#idDelete').linkbutton('enable');
$('#idEdit').linkbutton('enable');
},
onUnselect: function(rowIndex, rowData){
//当取消全部选中时则按钮不可用
var rows = dataGridOper.datagrid('getSelections');
if (rows.length == 0) {
//取消选中时，则删除，修改按钮不可用
$('#idDelete').linkbutton('disable');
$('#idEdit').linkbutton('disable');
}
},
onUnselectAll: function(rows){
//取消选中时，则删除，修改按钮不可用
$('#idDelete').linkbutton('disable');
$('#idEdit').linkbutton('disable');
},
onAfterEdit: function(rowIndex, rowData, changes){
//获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。
//dataGridOper.datagrid('getChanges', 'inserted');//用于判断是增删改的操作
//当用户完成编辑一行时触发，参数包括rowIndex：编辑行的索引，从 0 开始
//rowData：编辑行对应的记录 changes：更改的字段/值对
var urlData = "";
if (operator == "insertData") {
urlData = '"'+ rowData.username + '" , "' + rowData.gender + '" , "' + rowData.phone+'"';
console.info(urlData);
$.ajax({
type: "POST",
url: "http://127.0.0.1:9999/zhangdaicong/crud/save",
data:{savedata:urlData},
dataType: 'text',
success: function(msgResult){
console.info(msgResult);
if (msgResult == "success1") {
//提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据,
//保持该数据的状态,否则点击取消编辑，将会回到修改前的数据,相当于提交事务
dataGridOper.datagrid('acceptChanges');
//title, msg, icon, fn
$.messager.alert('系统提示', rowData.username +'保存成功！', 'info', function(btn){
//回调函数
dataGridOper.datagrid('load');
});
}
else {
$.messager.alert('系统提示', '保存失败：错误代码005', 'error');
//回滚
dataGridOper.datagrid('rejectChanges');
}
editorRow = -1;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$.messager.alert('系统提示', '保存失败：错误代码007' + textStatus, 'info')
}
});
}
var urlData2;
if (operator == "updateData") {
urlData2 = "oid=" + rowData.oid + ' gender="' + rowData.gender + '",phone="' + rowData.phone+'"';
console.info(urlData2);
$.ajax({
type: "POST",
url: "http://127.0.0.1:9999/zhangdaicong/crud/save2",
data:{updatedata:urlData2},
dataType: 'text',
success: function(msgResult){
console.info(msgResult);
if (msgResult == "success1success2") {
//提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据,
//保持该数据的状态,否则点击取消编辑，将会回到修改前的数据,相当于提交事务
dataGridOper.datagrid('acceptChanges');
//title, msg, icon, fn
$.messager.alert('系统提示', '保存成功！', 'info', function(btn){
//回调函数
dataGridOper.datagrid('load');
});
}
else {
$.messager.alert('系统提示', '保存失败：错误代码009', 'error');
//回滚
dataGridOper.datagrid('rejectChanges');
}
editorRow = -1;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$.messager.alert('系统提示', '保存失败：错误代码011' + textStatus, 'info')
}
});
}
},
onDblClickRow: function(rowIndex, rowData){
//当用户双击一行时触发，参数包括,rowIndex：被双击行的索引，从 0 开始,rowData：被双击行对应的记录
//双击行时进行编辑该行
//控制一次只能编辑一行
// if (editorRow == -1) {
// operator = "updateData";
//不让编辑用户名
dataGridOper.datagrid('removeEditor', 'username');
//在第一行增加
//队列进行编辑时必须在columns中列设置editor属性
//开始对一行进行编辑,参数index 索引
dataGridOper.datagrid('beginEdit', rowIndex);
editorRow = rowIndex;
// }
},
//当右键点击行时触发
onRowContextMenu: function(e, rowIndex, rowData){
//console.info(e);
//阻止浏览器默认的右键事件
e.preventDefault();
rightIndex = rowIndex;
//添加菜单
$('#editMenu').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
}
/**
* 右键增加
*/
function addRow(){
$('#idAdd').data().linkbutton.options.handler();
}
/**
* 右键修改
*/
function editRow(){
//取消选中当前页所有的行
dataGridOper.datagrid('unselectAll');
dataGridOper.datagrid('selectRow', rightIndex);
$('#idEdit').data().linkbutton.options.handler();
}
/**
* 右键删除
*/
function delRow(){
//取消选中当前页所有的行
dataGridOper.datagrid('unselectAll');
dataGridOper.datagrid('selectRow', rightIndex);
$('#idDelete').data().linkbutton.options.handler();
}
这是经过很多次加工修改出来的，实现的功能是：可以对记录进行增删改，并且是多记录的增删改。
DataGrid--多记录CRUD的更多相关文章
- easyui datagrid 没有记录
datagrid返回记录为0时显示"没有记录" datagrid 插件编写 <script> var emptyview = $.extend({},$.fn.data ...
- datagrid返回记录为0时显示“没有记录”
datagrid返回记录为0时显示“没有记录”,此问题的 <script>var myview = $.extend({},$.fn.datagrid.defaults.view,{ on ...
- jquery easyui里datagrid用法记录
1.删除行方法(deleteRow) $(); //1代表选中的行索引 2.删除多行数据 var rows = $('#ruleManagementTable').datagrid("get ...
- shift键复选dataGrid的记录时多余的文本总被选择了。
document.onkeydown = function(event) { if (event.shiftKey) { document.onselectstart = function(event ...
- CRUD操作 create创建 read读取 update修改 delete删除
1.注释语法:--,#2.后缀是.sql的文件是数据库查询文件3.保存查询4.在数据库里面 列有个名字叫字段 行有个名字叫记录 CRUD操作:create 创建(添加)read 读取update 修改 ...
- easyui datagrid 的分页刷新按钮
datagrid 刷新bug: 情形: 当用户A,B 同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1, B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...
- TSQL语句和CRUD（20161016）
上午 TSQL语句 1.创建数据库 create database test2; 2.删除数据库 drop database test2; 3.创建表 create table ceshi ( ids ...
- CRUD的操作，增删改查！
.注释语法:--,# .后缀是.sql的文件是数据库查询文件 .在创建查询里,那个需要保存的对话框只是,保存查询. .在数据库里面 列有个名字叫字段 行有个名字叫记录 CRUD操作: create 创 ...
- WPF Datagrid横向排列
<DataGrid.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal&q ...
随机推荐
- ContentProvider要点复习
ContentProvider要点复习 ContentProvider作为四大组件之一,发挥着举足轻重的作用.与之相关联的另外两个类分别是ContentResolver和ContentObserver ...
- iOS-三方框架AFNetworking基本使用
AFNetworking 是基于NSURLConnection, NSOperation开发的一款三方框架,主要用于处理一些关于网络请求上的业务,下文会简单介绍框架中经常使用的功能,如文件的上传,下载 ...
- 成都印迹婚纱摄影 | yinjilove.com
成都印迹婚纱摄影工作室 官方网站:http://yinjilove.com/ 联系方式:028-84278563 手机及微信号:18180642817 微信公众号:印迹摄影 地址:成都市锦江区牛王庙东 ...
- JS中可拖拽的甘特图和流程图
甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...
- EasyUI需注意的问题01
一.EasyUI-Datagrid分页 在创建数据表格(DataGrid)的时候,通过设置'pagination' 属性为 true,可以在数据表格的底部生成一个分页工具栏. <table id ...
- C#常用代码集合（1）
引用自james li的博客,地址:http://www.cnblogs.com/JamesLi2015/p/3147986.html 1 读取操作系统和CLR的版本 OperatingSys ...
- [poi2007]mem
题意:给定点数n<=300000的一棵树,然后初始时每条边权值为1,接下来按照时间点先后顺序的n+m-1个操作, 操作有两种: 1.A a b 把a到b的边权改为0 2.W u 求1号点到u号点 ...
- 在Python中调用glutInit遇到OpenGL.error.NullFunctionError的解决方法
在window10 64bit + Python环境下,通过pip install PyOpenGL成功之后,无奈执行到glutInit()时候总是报错. OpenGL.error.NullFunct ...
- Nodejs学习路线图
前言 用Nodejs已经1年有余,陆陆续续写了48篇关于Nodejs的博客文章,用过的包有上百个.和所有人一样,我也从Web开发开始,然后到包管 理,再到应用系统的开发,最后开源自己的Nodejs项目 ...
- PAT/简单模拟习题集（二）
B1018. 锤子剪刀布 (20) Discription: 大家应该都会玩"锤子剪刀布"的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负 ...