使用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 
 

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