`

datagrid--5 一些小的功能

 
阅读更多



 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!-- easyui的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
    <!-- 小图标的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
   
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../jslib/syUtil.js"></script>
 
 <script type="text/javascript">
 
  var datagrid;
  var editRow = undefined;
  
  $(function(){
  
   datagrid = $("#datagrid").datagrid({
    url : sy.bp()+'/userController/datagrid.action',
    iconCls : "icon-save",
    pagination : true,
    pageSize : 10,
    pageList : [10,20,30],
    //fit属性让这个表格填充到父级容器中
    fit : true,
    //fitColumns让表格自动调整列的宽度,而不出现横向的滚动条
    fitColumns : false,
    //如果一个列的值太长,需要折行显示,就需要设置nowrap : false
    nowrap : false,
    border : false,
    idField : "id",
    //行的样式
    rowStyler : function(rowIndex,rowData){
     if(rowData.name=='guest'){
      return "background:red";
     }
    },
    sortName : "name",
    sortOrder : "desc",
    //要使用frozenColumns那么fitColumns必须为false
    //frozenColumns就是在出现列滚动条时,下面这几列不动
    frozenColumns : [[
     {
      title:"编号",
      //field:"id",
      width:100,
      checkbox:true
     },
     {
      title:"姓名",
      field:"name",
      width:100,
      sortable:true,
      align : 'center',
      styler : function(value,rowData,rowIndex){
       if(value=='guest'){
        return "background:green";
       }
      }
     }
    ]],
    columns : [[
     {
      title:"密码",
      field:"pwd",
      width:400,
      //一定要返回一个字符串
      formatter:function(value,rowData,rowIndex){
       
       return "<span title='"+value+"'>"+value+"</span>";
      }
     },
     {title:"创建时间", field:"createdatetime", width:600},
     {title:"最后修改时间", field:"modifydatetime", width:600},
     {
      title:"控制",
      //借用一个字段,不然就显示不出来,上面那个field:"id",就注释掉
      field:"id",
      width:400,
      //一定要返回一个字符串
      formatter:function(value,rowData,rowIndex){
       
       return "<button>删除</button><button onclick='edit("+rowIndex+");'>编辑</button>";
      }
     }
    ]],
    toolbar : [
     {text:"新增",iconCls:"icon-add",handler:function(){
      if(editRow != undefined){
       datagrid.datagrid('endEdit',editRow);
      }else{
       datagrid.datagrid('insertRow',{
        index : 0,
        row : {
         
        }
       });
       
       changEditorAdd();
       
       datagrid.datagrid('beginEdit',0);
       
       editRow = 0;
      }
     }},
     "-",
     {text:"删除",iconCls:"icon-remove",handler:function(){
      var rows = datagrid.datagrid('getSelections');
      if(rows.length>0){
       $.messager.confirm("请确认","你确定要删除所选择的的记录吗?",function(r){
        
        if(r){
         var ids = [];
         for(var i=0;i<rows.length;i++){
          ids.push(rows[i].id);
         }
         
         $.ajax({
          url : sy.bp()+'/userController/remove.action',
          data : {
           ids : ids.join(',')
          },
          dataType : 'json',
          success : function(r){
           datagrid.datagrid('load');
           datagrid.datagrid('unselectAll');
           $.messager.show({title:"提示",msg:"删除成功"});
          }
         });
        }
       });
      }else{
       $.messager.alert("提示","请选择要删除的记录","warning");
      }
     }},
     "-",
     {text:"修改",iconCls:"icon-edit",handler:function(){
      var rows = datagrid.datagrid('getSelections');
      if(rows.length==1){
       if(editRow != undefined){
        datagrid.datagrid('endEdit',editRow);
       }else{
        changEditorEdit();
        editRow = datagrid.datagrid('getRowIndex',rows[0]);
        datagrid.datagrid('beginEdit',editRow);
       } 
      }
     }},
     "-",
     {text:"保存",iconCls:"icon-save",handler:function(){
      datagrid.datagrid('endEdit',editRow);
     }},
     "-",
     {text:"取消编辑",iconCls:"icon-redo",handler:function(){
      editRow = undefined
      datagrid.datagrid('rejectChanges');
      datagrid.datagrid('unselectAll');
     }},
    ],
    onAfterEdit : function(rowIndex, rowData, changes){
     
     var inserted = datagrid.datagrid('getChanges','inserted');
     var updated = datagrid.datagrid('getChanges','updated');
     
     if(inserted.length<1&&updated.length<1){
      editRow = undefined;
      datagrid.datagrid('unselectAll');
      return;
     }
     
     var url = "";
     if(inserted.length>0){
      url = "/userController/add.action";
     }
     if(updated.length>0){
      url = "/userController/edit.action";
     }
     
     $.ajax({
      url : sy.bp()+url,
      data : rowData,
      dataType : 'json',
      success : function(r){
       if(r&&r.success){
        datagrid.datagrid('acceptChanges');
        $.messager.show({
         title:'提示',
         msg:"操作成功!"
        });
       }else{
        datagrid.datagrid('rejectChanges');
        $.messager.alert("错误",r.msg,"error");
       }
       
       editRow = undefined;
      }
     });
    },
    onDblClickRow: function(rowIndex, rowData){
     if(editRow != undefined){
      datagrid.datagrid('endEdit',editRow);
     }else{
      changEditorEdit();
      datagrid.datagrid('beginEdit',rowIndex);
      editRow = rowIndex;
     } 
    },
    //右键显示菜单
    onRowContextMenu: function(e, rowIndex, rowData){
     e.preventDefault();
     $(this).datagrid('unselectAll');
     $(this).datagrid('selectRow',rowIndex);
     $('#menu').menu('show', {  
       left: e.pageX,  
       top: e.pageY  
     });
    }
   }); 
   
   //改变表头文字对齐方式
   $(".datagrid-header div").css("textAlign","left");
    
  });
  
  var search2 = function() {
   //load会回到第一页,reload会停留在当前页,所以一般用load
   datagrid.datagrid('load', getFormInput($('#searchForm'))); 
  };
  
  var clear2 = function(){
   datagrid.datagrid('load', {});
   $('#searchForm input').val('');
  }
  
  var getFormInput = function(form){
   var o = {};
   $.each(form.serializeArray(), function(index) {
    if (o[this['name']]) {
     o[this['name']] = o[this['name']] + "," + this['value'];
    } else {
     o[this['name']] = this['value'];
    }
   });
   return o;
  }
  
  //扩展一个editor
  $.extend($.fn.datagrid.defaults.editors, {  
      datetimebox: {  
          init: function(container, options){  
              var editor = $('<input/>').appendTo(container);
              options.editable = false;
              //变成datetimebox
              editor.datetimebox(options);  
              return editor;  
          },  
          getValue: function(target){  
              return $(target).datetimebox('getValue');  
          },  
          setValue: function(target, value){  
              $(target).datetimebox('setValue',value);  
          },  
          resize: function(target, width){  
              $(target).datetimebox('resize',width);  
          },
          destroy: function(target){
           $(target).datetimebox('destroy'); 
          }
            
      }  
  });
  
  //为datagrid添加方法
  $.extend($.fn.datagrid.methods, {
   addEditor : function(jq, param) {
    if (param instanceof Array) {
     $.each(param, function(index, item) {
      var e = $(jq).datagrid('getColumnOption', item.field);
      e.editor = item.editor;
     });
    } else {
     var e = $(jq).datagrid('getColumnOption', param.field);
     e.editor = param.editor;
    }
   },
   removeEditor : function(jq, param) {
    if (param instanceof Array) {
     $.each(param, function(index, item) {
      var e = $(jq).datagrid('getColumnOption', item);
      e.editor = {};
     });
    } else {
     var e = $(jq).datagrid('getColumnOption', param);
     e.editor = {};
    }
   }
  });
  
  function changEditorAdd(){
   datagrid.datagrid('addEditor',[
   {
    field: 'pwd',
    editor: {
     type:'validatebox',
     options:{required:true}
    }
   },
   {
    field: 'name',
    editor: {
     type:'validatebox',
     options:{required:true}
    }
   }
   ]);
   
   datagrid.datagrid('removeEditor',['createdatetime','modifydatetime']);
  }
  
  function changEditorEdit(){
   datagrid.datagrid('removeEditor',['pwd']);
   datagrid.datagrid('addEditor',[
   {
    field: 'name',
    editor: {
     type:'validatebox',
     options:{required:true}
    }
   },
   {
    field: 'createdatetime',
    editor: {
     type:'datetimebox',
     options:{required:true}
    }
   },
   {
    field: 'modifydatetime',
    editor: {
     type:'datetimebox',
     options:{required:true}
    }
   }
   ]);
  }
  
  function edit(rowIndex){
   var row = datagrid.datagrid('getRows')[rowIndex];
   alert(row.name);
  }
    
  
  
 </script>
 
 
  </head>
 
  <body> 
   <div class="easyui-layout" fit="true" border="false">
 
  <div title="查询" region="north"  style="height:110px;overflow:hidden">
   <form id="searchForm">
    <table id="queryTab" style="width:100%;height:100%;">
     <tr>
      <th align="right">用户名</th>
      <td><input name="name"/></td>
     </tr>
     <tr>
      <th align="right">创建日期</th>
      <td>
       <input name="createdatetimeStart" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
       至
       <input name="createdatetimeEnd" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
       <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="search2();">查询</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="clear2();">清空</a>
      </td>
     </tr>
    </table>
   </form>
  </div>
  
  <div title="用户管理" region="center" border="false">
   <table id="datagrid"></table>
  </div>
  
 <div id="menu" class="easyui-menu" style="width:120px;display:none;"> 
  <div onclick="" iconCls="icon-add">增加</div>
  <div onclick="" iconCls="icon-remove">删除</div>
  <div onclick="" iconCls="icon-edit">修改</div>
 </div>
  
 </div>
 
  </body>
</html>

 



 

 


 

  • 大小: 54 KB
  • 大小: 60 KB
分享到:
评论

相关推荐

    Datagrid-filter插件

    `Datagrid-filter`插件则进一步增强了Grid的功能,通过添加过滤器,使用户可以根据预定义或自定义的条件对数据进行筛选,减少了手动查找特定信息的时间。 在实际应用中,`Datagrid-filter`插件的使用非常简单。`...

    datagrid-dnd(可以拖放的datagrid)

    在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性,尤其适用于那些需要频繁调整数据顺序的场景。 首先...

    datagrid-export.zip

    其中,datagrid是一个强大的表格控件,能够处理大量数据,支持分页、排序、过滤等功能。在这个场景中,我们关注的是如何将datagrid中的数据导出为Excel格式,以便于数据分析和共享。 导出到Excel通常涉及到两个关键...

    datagrid-groupview.js

    在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...

    datagrid-filter

    datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...

    datagrid-detailview.js

    首先,`datagrid-detailview.js`的核心功能是动态渲染和管理数据网格的详细信息视图。在传统的数据网格中,用户通常只能看到数据的基本信息,而`datagrid-detailview.js`允许用户通过点击行或图标来展开详细的子数据...

    datagrid-detailview.js datagrid-bufferview.js datagrid-groupview.js

    EasyUI提供了一套完整的组件,如表格(datagrid)、对话框、表单等,帮助开发者快速创建功能丰富的网页应用。在这个场景下,我们关注的是`datagrid`的几种视图(view):DetailView、BufferView、GroupView以及...

    datagrid-scrollview-demo

    【标题】"datagrid-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目,主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件,它能够以表格的形式...

    datagrid-export文件及pdf和Excel表格使用demo.rar

    该"datagrid-export文件及pdf和Excel表格使用demo.rar"压缩包中包含了示例代码和演示,供开发者了解和学习如何使用datagrid-export功能。下载并解压后,你可以直接查看运行效果,这对于快速理解和上手这个库非常有...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...

    datagrid-export-filter.zip

    datagrid-export-filter.zip是一个压缩包,其中包含了用于EasyUI Datagrid的导出和过滤功能的JavaScript文件。EasyUI是一个基于jQuery的UI库,它为开发者提供了丰富的组件,包括表格(datagrid)、对话框、菜单等,...

    datagrid-export.js

    使用这个js,只需要一行代码即可实现easyui datagrid 导出到excel(之前在网上找了很多方法,看了很多文章,大部分实现这个功能都需要一大堆代码,几十行甚至上百行,这个一行代码解决他不香吗)

    datagrid-import&&export.rar

    5. **datagrid-export.js 和 datagrid-import.js**:这两个JavaScript文件分别对应于数据网格的导出和导入功能。JavaScript作为客户端脚本语言,常用于实现Web页面的动态交互。这些文件可能包含了处理导出和导入逻辑...

    jeasyui-datagrid-datagrid

    5. **操作功能** DataGrid内置了丰富的操作功能,如添加、编辑、删除行。这些功能可以通过设置`toolbar`选项来启用,同时配合`onBeforeEdit`、`onAfterEdit`等事件实现数据的增删改。 6. **排序和过滤** DataGrid...

    wpf-datagrid-access DB

    在.NET框架中,Windows Presentation Foundation(WPF)是一种用于构建桌面应用程序的强大工具,它提供了丰富的用户界面和数据绑定功能。WPF Datagrid是WPF中一个重要的控件,用于显示和操作表格数据,类似于Windows...

    datagrid-cellediting.zip

    在IT领域,EasyUI是一个基于JavaScript和HTML5的前端框架,它为开发人员提供了一组丰富的用户界面组件,包括datagrid、dialog、form等,用于构建交互式的Web应用。"datagrid-cellediting.zip"这个压缩包显然是针对...

    easyui-datagrid2-demo.zip

    5. **功能扩展**: - Datagrid 还支持行选择(singleSelect 或 multiSelect)、行编辑、行添加、行删除等功能,可以通过设置相应的配置项来启用。 6. **自定义列头**: - Datagrid 的列头可以根据需要自定义,...

    datagrid-detailview

    然而,原生的easyUI可能并未内置详细的行展开功能,因此需要额外的插件如"datagrid-detailview"来扩展这种功能。 "datagrid-detailview.js"文件很可能是这个插件的核心代码,包含以下关键知识点: 1. **行展开机制...

Global site tag (gtag.js) - Google Analytics