datagrid --3

cyjsky 2014-05-16


datagrid --3
 

<!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">
 
  var datagrid;
  var editRow = undefined;
  
  $(function(){
  
   datagrid = $("#datagrid").datagrid({
    url : 'http://127.0.0.1:8001/sypro/userController/datagrid.action',
    iconCls : "icon-save",
    pagination : true,
    pageSize : 10,
    pageList : [10,20,30],
    //fit属性让这个表格填充到父级容器中
    fit : true,
    //fitColumns让表格自动调整列的宽度,而不出现横向的滚动条
    fitColumns : true,
    //如果一个列的值太长,需要折行显示,就需要设置nowrap : false
    nowrap : false,
    border : false,
    idField : "id",
    sortName : "name",
    sortOrder : "desc",
    columns : [[
     {title:"编号", field:"id", width:100, checkbox:true},
     {title:"姓名", field:"name", width:100, sortable:true, editor:{type:'validatebox',options:{required:true}}},
     {title:"密码", field:"password", width:200, editor:{type:'validatebox',options:{required:true}}},
     {title:"创建时间", field:"createdatetime", width:200, editor:{type:'datetimebox',options:{required:true}}}
    ]],
    toolbar : [
     {text:"新增",iconCls:"icon-add",handler:function(){
      if(editRow != undefined){
       datagrid.datagrid('endEdit',editRow);
      }else{
       datagrid.datagrid('insertRow',{
        index : 0,
        row : {
         
        }
       });
       
       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);
         }
         console.info(ids.join(','));
        }
       });
      }else{
       $.messager.alert("提示","请选择要删除的记录","error");
      }
     }},
     "-",
     {text:"修改",iconCls:"icon-edit",handler:function(){
      var rows = datagrid.datagrid('getSelections');
      if(rows.length==1){
       if(editRow != undefined){
        datagrid.datagrid('endEdit',editRow);
       }else{
        editRow = datagrid.datagrid('getRowIndex',rows[0]);
        datagrid.datagrid('beginEdit',editRow);
        
       } 
      }
     }},
     "-",
     {text:"保存",iconCls:"icon-save",handler:function(){
      console.info($.fn.datagrid.methods);
      datagrid.datagrid('endEdit',editRow);
     }},
     "-",
     {text:"取消编辑",iconCls:"icon-redo",handler:function(){
      editRow = undefined
      datagrid.datagrid('rejectChanges');
      datagrid.datagrid('unselectAll');
     }},
    ],
    onAfterEdit : function(rowIndex, rowData, changes){
     editRow = undefined
     console.info(rowData);
    },
    onDblClickRow: function(rowIndex, rowData){
     if(editRow != undefined){
      datagrid.datagrid('endEdit',editRow);
     }else{
      datagrid.datagrid('beginEdit',rowIndex);
      editRow = rowIndex;
     } 
    }
   }); 
    
  });
  
  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'); 
          }
            
      }  
  }); 
    
  
  
 </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> 
  </body>
</html>


 

相关推荐

87281248 / 0评论 2013-03-27