备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

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

首先定义变量


代码

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
前端开发
关键词：
EasyUI插件
使用jQuery easyui CRUD插件
skyme
目录
相关文章
walb呀
|
JavaScript 前端开发 开发框架
基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
walb呀
1693 0
老朱教授
|
JavaScript 前端开发
iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件
老朱教授
999 0
老朱教授
|
前端开发 JavaScript
JQuery爱好者们的福音：jQuery EasyUI 开源插件套装 完全替代ExtJS
老朱教授
1687 0
文艺小青年
|
Web App开发 前端开发 .NET
ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
文艺小青年
2070 0
文艺小青年
|
.NET 数据安全/隐私保护 容器
ASP.NET MVC5+EF6+EasyUI 后台管理系统（57）-插件---ueditor使用
文艺小青年
1618 0
文艺小青年
|
Web App开发 JavaScript 前端开发
ASP.NET MVC5+EF6+EasyUI 后台管理系统（56）-插件---单文件上传与easyui使用fancybox
文艺小青年
1559 0
skyme
|
JavaScript 前端开发
使用jquery-easyui写的CRUD插件(1)
skyme
1857 0
skyme
|
JSON JavaScript 前端开发
使用jquery-easyui写的CRUD插件(3)
skyme
1766 0
涂作权
|
JavaScript 前端开发 Java
EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
  {                       field : 'startPort',                       title : "起始端口",                       editor: "text",                       width : 50,                       editor: {    
涂作权
1978 0
skyme张
|
前端开发 JavaScript
使用jquery-easyui写的CRUD插件(1)
写插件先看看jqeury的插件如何写，先了解一下如何写插件的代码。 jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。
skyme张
1004 0

热门文章

最新文章

  • 1
    jQuery+CSS3自动轮播焦点图特效源码
  • 2
    iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件
  • 3
    茗洋芳竹Easy UI 部分问题解决系列专题[datagrid 复杂表头]
  • 4
    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】
  • 5
    easyui combobox 左匹配模糊查询
  • 6
    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（6）-Unity 2.x依赖注入by运行时注入[附源码]
  • 7
    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（27）-权限管理系统-分配用户给角色
  • 8
    如何让easyui gridview 宽度自适应窗口改变
  • 9
    沫沫金：EasyUI 固定列
  • 10
    ASP.NET MVC5+EF6+EasyUI 后台管理系统（37）-文章发布系统④-百万级数据和千万级数据简单测试
  • 1
    jQuery+CSS3自动轮播焦点图特效源码
    15
  • 2
    jQuery模态框弹窗提示代码
    16
  • 3
    使用JavaScript、jQuery和Bootstrap构建待办事项应用
    11
  • 4
    jQuery实现二级菜单
    11
  • 5
    jQuery选择器 获取元素的十一种方式
    15
  • 6
    jQuery幸运大转盘抽奖活动代码
    32
  • 7
    JQuery样式操作、click事件以及索引值-选项卡应用示例
    20
  • 8
    jquery+css实现Tab栏切换的代码实例
    17
  • 9
    jquery实现二级导航下拉菜单效果实例
    19
  • 10
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    90

    • 相关课程

    更多
  • jQuery开发教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript入门与实战

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4