使用jquery-easyui写的CRUD插件(2)
时间:2022-05-04
本文章向大家介绍使用jquery-easyui写的CRUD插件(2)，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
首先定义变量
var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);
var addTypeName = options.addTypeName;//添加div的页面的名称，默认是type-window
var formId = options.formId;//要操作的form的名称
var title = options.title;//标题
var width = options.width;//宽
var height = options.height;//高
var gridurl = options.gridurl;//请求的url的地址
var addurl = options.addurl;//保存是用的链接
var loadurl = options.loadurl;//显示load的链接
var editurl = options.editurl;//更新使用的链接
var delurl = options.delurl;//要删除使用的链接
var sortName = options.sortName;//要排序的列名称
var sortOrder = options.sortOrder;//排序的方式
var remoteSort = options.remoteSort;//是否远程排序
var frozenColumns = options.frozenColumns;//合并列，显示列
var columns = options.columns;//列显示
var pagination = options.pagination;//是否分页然后添加方法
主要有以下几个方法：
datagrid 列表方法
addWindow 添加方法
editWindow 修改方法
delWindow 删除方法
好，把带方法的插件路径的代码贴上来吧
// JavaScript Document
// 为easyui增加的插件，方便CRUD的操作
(function(jQuery){
jQuery.fn.crudUIGrid=function(options){
var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);
var addTypeName = options.addTypeName;//添加div的页面的名称，默认是type-window
var formId = options.formId;//要操作的form的名称
var title = options.title;//标题
var width = options.width;//宽
var height = options.height;//高
var gridurl = options.gridurl;//请求的url的地址
var addurl = options.addurl;//保存是用的链接
var loadurl = options.loadurl;//显示load的链接
var editurl = options.editurl;//更新使用的链接
var delurl = options.delurl;//要删除使用的链接
var sortName = options.sortName;//要排序的列名称
var sortOrder = options.sortOrder;//排序的方式
var remoteSort = options.remoteSort;//是否远程排序
var frozenColumns = options.frozenColumns;//合并列，显示列
var columns = options.columns;//列显示
var pagination = options.pagination;//是否分页
return this.each(function(){
var win = $('#'+addTypeName+'').window({
closed:true
});
var grid = jQuery(this);
grid.datagrid({
title:title,
iconCls:'icon-save',
width:width,
height:height,
nowrap: false,
striped: true,
url:gridurl,
sortName: sortName,
sortOrder: sortOrder,
remoteSort: remoteSort,
idField:'code',
frozenColumns:frozenColumns,
columns:columns,
pagination:pagination,
rownumbers:true,
toolbar:[{
id:'btnadd',
text:'add',
iconCls:'icon-add',
handler:addWindow
},{
id:'btncut',
text:'Cut',
iconCls:'icon-cut',
handler:editWindow
},'-',{
id:'btnsave',
text:'Save',
disabled:true,
iconCls:'icon-save',
handler:delWindow
}]
});
grid.datagrid('getPanel').panel({
collapsible:true
});
//添加方法
function addWindow(){
win.window('open');
$('#'+formId+'').form('clear');
$('#btn-save').unbind('click').removeAttr('onclick').click(
function(){
form.form('submit',{
url:addurl,
onSubmit:function(){
},
success:function(data){
eval('data='+data);
if (data.success){
grid.datagrid('reload');
win.window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
);
}
function editWindow(){
var row = grid.datagrid('getSelected');
if (row){
win.window('open');
$('#formId').form('load',loadurl+row.id);
$('#btn-save').unbind('click').removeAttr('onclick').click(
function(){
form.form('submit',{
url:editurl,
onSubmit:function(){
},
success:function(data){
eval('data='+data);
if (data.success){
grid.datagrid('reload');
win.window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
);
}else{
$.messager.show({
title:'警告',
msg:'请先选择要修改的记录。'
});
}
}
function delWindow(){
var ids = [];
var rows = grid.datagrid('getSelections');
if (rows!=''){
for(var i=0;i<rows.length;i++){
ids.push(rows[i].id);
}
ids.join(',');
$.messager.confirm('提示信息', '您确认要删除这几条记录吗?', function(data){
if(data){
$.ajax({
url: delurl+ids,
type: 'GET',
timeout: 1000,
error: function(){
$.messager.alert('错误','删除失败!','error');
},
success: function(data){
eval('data='+data);
if (data.success){
grid.datagrid('reload');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
});
}else{
$.messager.show({
title:'警告',
msg:'请先选择要删除的记录。'
});
}
}
});
};
jQuery.fn.crudUIGrid.defaults = {
addTypeName : 'type-window',
title : 'CRUD',
pagination : true
};
})(jQuery);OK,js插件代码部分已经完成。
看调用部分的代码
var win = 'type-window';//添加部分代码的div的名称
$('#test').crudUIGrid(
{
addTypeName : win,
gridurl : 'datagrid_data.json',
addurl : '/idep_b/page/warning/newtype.do?method=save',
loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',
editurl : '/idep_b/page/warning/newtype.do?method=save',
delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]]
}
);
});以下是完整的前台html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script language="javascript" src="../jquery-1.4.2.min.js"></script>
<script language="javascript" src="../plug/jquery.easyui.min.js"></script>
<script language="javascript" src="../plug/locale/easyui-lang-zh_CN.js"></script>
<script language="javascript" src="../plug/jquery.uigrid.js"></script>
<script language="javascript">
/**$(function(){
$('#test').crudUIGrid(
{
title:'学生信息',
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
}
);
});*/
$(function(){
var win = 'type-window';//添加部分代码的div的名称
$('#test').crudUIGrid(
{
addTypeName : win,
gridurl : 'datagrid_data.json',
addurl : '/idep_b/page/warning/newtype.do?method=save',
loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',
editurl : '/idep_b/page/warning/newtype.do?method=save',
delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]]
}
);
});
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
}
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'));
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
function mergeCells(){
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
}
//关闭窗体
function closeWindow(){
$('#type-window').window('close');
}
</script>
</head>
<body>
<h1>CRUD表格</h1>
<div style="margin-bottom:10px;">
<a href="#" onClick="resize()">resize</a>
<a href="#" onClick="getSelected()">getSelected</a>
<a href="#" onClick="getSelections()">getSelections</a>
<a href="#" onClick="clearSelections()">clearSelections</a>
<a href="#" onClick="selectRow()">selectRow</a>
<a href="#" onClick="selectRecord()">selectRecord</a>
<a href="#" onClick="unselectRow()">unselectRow</a>
<a href="#" onClick="mergeCells()">mergeCells</a>
</div>
<table id="test"></table>
<!--添加部分代码-->
<div id="type-window" title="告警类型维护" style="width:600px;height:320px;">
<div style="padding:0px 0px 0px 0px;">
<table width="98%" border="1" bordercolor="#a8d1e7" class="masktable">
<tr>
<th colspan="4" class="title"><div class="bgimg">告警类型</div></th>
</tr>
<tr>
<th>
告警实体：
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警级别：
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警状态：
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警阀值：
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警时间间隔：
</th>
<td class="input_bg">
（分钟）
</td>
</tr>
<tr>
<th>
接收人员手机号：
</th>
<td class="input_bg">
<input type="button" class="btn-style-01" value="查询" onClick="queryPersonName();"/>
</td>
</tr>
</table>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="" id="btn-save" class="easyui-linkbutton" icon="icon-ok">保存</a>
<a href="javascript:void(0)" onClick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
因为这里上传附件的大小有限，所以将程序的源代码放到我的另一个博客的路径下
如果想要源码的话可以去下载。
http://lgstarzkhl.javaeye.com/admin/blogs/784141
下载后在html/t_4.html文件就是，在后面我会继续加入与后台通信的代码来完善整个工程。
- ShellExecute 启动外部程序 参数详细介绍
- 零基础学编程033：字符串的split拆分与join连接
- 零基础学编程032：生成二维码
- C#，一些非常简单但应该知道的知识点
- C#神奇的扩展方法
- 使用Python制作一个简单的刷博器
- 零基础学编程031：Python与其它语言最不同的一条语法规则
- dedecms批量导出新增文章url和标题
- 明理知意：复合索引优化及索引访问原理
- WCF配置文件与文件下载之坎坷路
- 零基础学编程030：像黑客般玩玩字符艺术
- Android获取SD卡总容量，可用大小，机身内存总容量及可用大小
- 零基础学编程029：程序员作图不用笔
- 零基础学编程028：面向对象编程OOP
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jdbc连接oracle语法
- java实现数据库连接的工具类
- shell脚本快速入门之-----正则三剑客之一grep用法大全！！！
- 【网页特效】11 个文本输入和 6 个按钮操作 特效库
- shell脚本快速入门之-----正则三剑客之二sed用法大全！！！
- JSP中的Cookie
- 傅里叶变换
- shell脚本快速入门之-----shell脚本练习100例！！！
- java监听器
- shell脚本快速入门之-----函数
- shell脚本快速入门之-----循环（for、while、until）
- ThreadPoolExecutor系列三——ThreadPoolExecutor 源码解析
- shell脚本快速入门之-----数组
- JSTL
- shell脚本快速入门之-----正则三剑客之三awk用法大全！！！