AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

使用jquery-easyui写的CRUD插件(2)

2016-04-25 1608
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

首先定义变量


代码

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文件就是，在后面我会继续加入与后台通信的代码来完善整个工程。


文章标签：
JavaScript
前端开发
关键词：
jQuery插件
EasyUI插件
使用jQuery easyui CRUD插件
jQuery crud插件
skyme
目录
相关文章
哈你真皮
|
1天前
|
JavaScript 前端开发 API
漂亮的jQuery对话框插件Dialogify
这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框， 可以生成漂亮的对话框效果。
哈你真皮
20 7
哈你真皮
|
1天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
哈你真皮
22 7
游客dng4gjyb342he
|
1天前
|
JavaScript
jQuery响应式垂直侧边栏插件rvnm
jQuery响应式垂直侧边栏插件rvnm
游客dng4gjyb342he
19 6
游客dng4gjyb342he
|
8天前
|
JavaScript
jQuery简单实用的圆形进度条插件
CirclesProgressbar是一款简单实用的jQuery圆形进度条插件。该插件可以自定义圆形进度条的大小，填充颜色，边框颜色和是否带动画效果等。该圆形进度条插件在使用上非常简单。
游客dng4gjyb342he
14 3
哈你真皮
|
13天前
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色，提示框的位置，提示框的显示时间，提示框的动画效果等。
哈你真皮
17 2
哈你真皮
|
16天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
哈你真皮
28 5
游客dng4gjyb342he
|
17天前
|
JavaScript 前端开发 容器
jQuery二维码生成插件
jquery.qrcode.js二维码插件允许你在网页中容易的插入二维码，可以生成表格形式的二维码，或基于canvas的图片二维码
游客dng4gjyb342he
22 4
游客dng4gjyb342he
|
16天前
|
移动开发 JavaScript 前端开发
基于canvas的jQuery图片剪裁插件
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单，可以基于HTML5 canvas实现图片的平移和剪裁。
游客dng4gjyb342he
20 1
哈你真皮
|
2天前
|
JavaScript 前端开发
灵活的jQuery垂直手风琴插件
这是一款使用jQuery和css3 transitions制作垂直手风琴插件。
哈你真皮
16 0
哈你真皮
|
17天前
|
JavaScript 前端开发 API
jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件。该jquery日期选择器提供多个配置参数和方法，可以创建响应式的、灵活的、多种主题效果的日期范围选择器。
哈你真皮
18 0

热门文章

最新文章

  • 1
    jquery.cookie中的操作
  • 2
    JQuery利用sort对DOM元素进行排序
  • 3
    jquery tmpl
  • 4
    Jquery 超炫的导航效果
  • 5
    jquery datepicker
  • 6
    利用FireBug使JQuery的学习更加轻松愉快
  • 7
    JQuery利用sort对DOM元素进行排序
  • 8
    jQuery从html代码中获取对应标签的写法
  • 9
    js跨域交互(jQuery+php)之jsonp使用心得
  • 10
    jquery 遍历dom元素
  • 1
    JQuery EasyUI -- 日历选择器，2024年最新程序员经验分享
    179
  • 2
    Easyui combobox 取值赋值解答
    194
  • 3
    EasyUi js 加载数据进下拉框combobox
    66
  • 4
    EasyUi js 加载数据表格DataGrid
    59
  • 5
    EasyUi下拉框选值时触发js事件。
    61
  • 6
    struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Action的实现类
    44
  • 7
    struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
    46
  • 8
    struts+hibernate+oracle+easyui实现lazyout组件的简单案例——OpSessionview实现
    65
  • 9
    struts+hibernate+oracle+easyui实现lazyout组件的简单案例——工具类
    39
  • 10
    struts+hibernate+oracle+easyui实现lazyout组件的简单案例——DeptDao层代码
    37

    • 相关课程

    更多
  • jQuery开发教程
  • Vue.js 入门与实战
  • Ajax入门
  • JavaScript入门与实战
  • 前端开发CSS基础
  • Ajax 前端开发入门与实战

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • 现代Javascript高级教程
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月