JQuery EasyUI(36)

原創 Roger_CoderLife 2020-03-19 12:39

                     第三十二章： DataGrid（數據表格）組件[5]

學習要點：

  1. 新增功能

 一、新增功能

DataGrid屬性，擴展自Panel面板
屬性名 值 說明
editors object 定義在編輯行的時候使用的編輯器。
列屬性，在 columns裏設置的屬性
屬性名 值 說明
editor string，object 指明編輯類型。當字符串指明編輯類型的時候，對象包含兩個屬性：type：字符串，可以使用的類型有：text,textarea,cheakbox,numberbox,validatebox,datebox,combobox,combotree。options：對象，object，該編輯器屬性對應於編輯類型。
Editor（編輯器）
屬性名 值 說明
 init container,options 初始化編輯器並返回目標對象。
destroy target 如果有必要銷燬編輯器。
getValue target 從編輯器中獲取值。
setValue target,value 向編輯器中寫入值。
resize target,width 如果有必要調整編輯器的大小。
DataGrid方法
方法名 值 說明
appendRow row 追加一個新行，新行將被添加到最後的位置。
insertRow row 插入一個新行，參考包括以下屬性：index：要插入的行索引，如果該索引值未定義，則追加新行。row：行數據
beginEdit index 開始編輯行。
endEdit index 結束編輯行。
rejectChanges none 回滾所有從創建或上一次調用acceptChange函數後更改的地址。
DataGrid事件
屬性名 值 說明
onAfterEdit rowIndex，rowData，changes 在用戶完成編輯一行的時候觸發，參數包括：rowIndex：編輯行的索引，索引從0開始。rowData：對應於完成編輯的行的記錄。changes：更改後的字段（鍵）/值對。

 

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <style>
       .textbox{
          height:200px;
          margin:0;
          padding:0 2px;
          box-sizing:content-box;
       }
    </style>             
</head>
  <body>
     <table id="box"></table>
     <div id="tb" style="padding:5px;">
       <div style="margin-buttom:5px;">
          <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-deit" plain="true">修改</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" style="display:none" id="save">保存</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" style="display:none" id="redo">取消編輯</a>
        </div>
        <div style="padding:0 0 0 7px;color='#ccc'">
           查詢賬號：<input type="text" name="user" class="textbox" style="width:100px">
           創建時間從：<input type="text" name="date_from" class="easyui-datebox" 
 editable="false" style="width:100px"> 到：<input type="text" name="date_to" class="easyui-datebox" editable="false" style="width:100px">
           <a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="obj.search();">查詢</a>
        </div>
     </div>
  </body>
</html>
//擴展dateTimeBox
$.extend($.fn.datagrid.defaults.editors,{
    datetimebox:{
        init:function(container,options){
           var input = $('<input type="text">').appendTo(container);
           options.editable = false;
           input.datetimebox(options);
           return input;
         },
        getValue:function(target){
            return $(target).datetimebox('getValue');
         },
        setValue:function(target){
           $(target).datetimebox('setValue',value);
         },
        resize:function(target){
           $(target).datetimebox('reSize',width);
         },
        destory:function(target){
           $(target).datetimebox('destory');           
         },
    }
});

$(function(){
      
      obj = {
       editRow:false,
       search:function(){
            $('#box').datagrid('load',{
            user:$.trim($('input[name="user"]').val()),
            date_from:$('input[name="date_from"]').val(),
            date_to:$('input[name="date_to"]').val();
       });
      },
       add:function(){
        $('#save,#redo').show();

       /*
         //當前頁行結尾添加
        $('#box').datagrid('appendRow',{
               user:'bnbbs',
               email:'[email protected]',
               data:'2014-11-11',
     });
      */

         if(!this.editRow){
}
        //添加一行
        $('#box').datagrid('insertRow',{
            index:0,
            row:{
               /*
               user:'bnbbs',
               email:'[email protected]',
               data:'2014-11-11', 
               */       
          }
      });

         //將第一行設置爲可編輯狀態。
         $('#box').datagrid('beginEdit',0);
         this.editRow = true;
    }, 

     save:function(){
        //這兩句不應該放這裏，應該是保存成功之後在執行。
        //$('#save,#redo').hidden();
        //$('#box').dategrid('rejectChanges');
        //將第一行設置爲結束編輯狀態。
         $('#box').datagrid('endEdit',0);        
     }
     redo:function(){
        $('#save,#redo').hidden();
        $('#box').dategrid('rejectChanges');
        this.editRow = false;
     }
   };

     $('#box').datagrid({
        width:600,
        //url:'content.json',
        url:'user.php',
        title:'用戶列表',
        iconCls:'icon-search',
        striped:true,
        nowrap:true,
        rownumbers:true,
        singleSelect:true, 
        fitColumns:true,     
        columns:[[
             {
               field:'user',
               title:'賬號',
               sortable:true,
               width：100, 
               editor:{
                 type:'validatebox',
                 options:{
                      required:true,
                  },
                },             
             },
             {
               field:'email',
               title:'郵箱',
               sortable:true, 
               width：100,
               editor:{
                 type:'validatebox',
                 options:{
                      required:true,
                      validType:'email',
                  },
                },                
             },
             {
               field:'date',
               title:'註冊時間',
               sortable:true,
               width：100,
               editor:{
                 type:'datebox',
                 options:{
                      required:true,
                  },
                }, 
  
             },
      ]],
        toolbar:'#tb',        
        pagination:true,
        pageSize:10,
        pageList:[10,20,30],
        pageNumber:1,
        pagePosition:'top',
        pagePosition:'both',
        pagePosition:'bottom',
        sortName:'date',
        sortOrder:'DESC',
        onAfterEdit:function(rowIndex,rowData,changes){
         $('#save,#redo').hidden();
         obj.editRow = false;
          console.log(rowDate);
   }
});
[
  {
   "user":"蠟筆小新",
   "emial":"[email protected]",
   "date":"2014-10-01",
  },
  {
   "user":"櫻桃小丸子",
   "emial":"[email protected]",
   "date":"2014-10-02",
  },
  {
   "user":"黑崎一護",
   "emial":"[email protected]",
   "date":"2014-10-03",
  },
]
<?php
   header('Content-Type:text/html;chartset=utf-8');
   define('DB_HOST','localhost');
   define('DB_USER','root');
   define('DB_PWD','123456');
   define('DB_NAME','thinkphp');    

  $conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('數據庫連接失敗：'.mysql_error());

  @mysql_select_db(DB_NAME)or die('數據庫錯誤：'.mysql_error());

  @mysql_query('SET NMAES UTF8')or die('字符集錯誤：'.mysql_error());
?>

<?php
   require 'config.hph';

   $page = $_POST['page'];
   $pageSize = $_POST['row'];
   $first = $pageSize * ($page - 1);

   $order = $_POST['order'];
   $sort = $_POST['sort'];
   
   $sql = '';
   $user = '';

   $datefrom = '';
   $dateto = '';

   if(isset($_POST['user']) && !empty($_POST['user'])){
    $user = "user LINK '%{$_POST['user']}%' AND ";
    $sql .= $user;
  }

   if(isset($_POST['$datefrom']) && !empty($_POST['$datefrom'])){
    $datefrom = "date >='{$_POST['$datefrom']}' AND ";
    $sql .= $datefrom;
  }


   if(isset($_POST['$dateto']) && !empty($_POST['$dateto'])){
    $dateto = "date <='{$_POST['$dateto']}' AND ";
    $sql .= $dateto;
  }


   if(!empty($sql)){
     sql = 'WHERE '.substr($sql,0,-4);
   }


   $query = mysql_query("SELECT user,email,data FROM think_user $sql ORDER BY $order $sort LIMIT $first,$pageSize") or die('SQL 錯誤！');
   $total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user $sql"));
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }
     
   
   echo '{"total":'.$total.',"rows":['.$json.'],"footer":[{"user":"統計","email":"統計","date":"統計"}]}'; 

   $json  = substr($json,0,-1);


   mysql_close();
?>

 

 

作者：Roger_CoderLife

鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103137504

本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JQuery EasyUI(56)

Roger_CoderLife 2020-05-16 18:21:55

JQuery EasyUI(55)

Roger_CoderLife 2020-05-16 18:21:55

JQuery EasyUI(53)

Roger_CoderLife 2020-05-14 08:25:41

JQuery EasyUI(54)

Roger_CoderLife 2020-05-14 08:25:41

JQuery EasyUI(52)

Roger_CoderLife 2020-04-28 15:53:07

JQuery EasyUI(51)

Roger_CoderLife 2020-04-19 17:26:07

JQuery EasyUI(49)

Roger_CoderLife 2020-04-14 06:41:32

JQuery EasyUI(50)

Roger_CoderLife 2020-04-14 06:41:32

JQuery EasyUI(43)

Roger_CoderLife 2020-04-02 04:55:11

JQuery EasyUI(45)

Roger_CoderLife 2020-04-02 04:55:11

JQuery EasyUI(34)

Roger_CoderLife 2020-03-17 19:24:44

JQuery EasyUI(33)

Roger_CoderLife 2020-03-14 10:35:06

JQuery EasyUI(32)

Roger_CoderLife 2020-03-14 10:35:06

JQuery EasyUI(56)

Roger_CoderLife 2020-05-16 18:21:55

JQuery EasyUI(55)

Roger_CoderLife 2020-05-16 18:21:55