JQuery EasyUI(38)

最新推荐文章于 2021-05-19 10:09:13 发布
最新推荐文章于 2021-05-19 10:09:13 发布
阅读量230 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                     第三十二章： DataGrid（数据表格）组件[7]

学习要点：

  1. 后台交互

 一、后台交互

DataGrid方法
属性名值说明
loadparam加载和显示第一页的所有行，即涮新当前页。
loadingnone显示载入状态
loadednone隐藏载入状态
unselectAllnone取消所有当前页中的所有行
getChangestype从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。

 

<!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" onclick="obj.add();">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-deit" plain="true" onclick="obj.edit();">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="obj.remove();">删除</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" onclick="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:undefined,
       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:'bnbbs@163.com',
               data:'2014-11-11',
     });
      */

         if(this.editRow == undefined){

        //添加一行
        $('#box').datagrid('insertRow',{
            index:0,
            row:{
               /*
               user:'bnbbs',
               email:'bnbbs@163.com',
               data:'2014-11-11', 
               */       
          }
      });

         //将第一行设置为可编辑状态。
         $('#box').datagrid('beginEdit',0);
         this.editRow = 0;     
       }
    },

     save:function(){
        //这两句不应该放这里，应该是保存成功之后在执行。
        //$('#save,#redo').hidden();
        //$('#box').dategrid('rejectChanges');
        //将第一行设置为结束编辑状态。
         $('#box').datagrid('endEdit',this.editRow);        
     },

     redo:function(){
        $('#save,#redo').hidden();
        $('#box').dategrid('rejectChanges');
        this.editRow = undefined;
     },

     edit:function(){
        var rows = $('#box').datagrid('getSelections');
        if(rows.length == 1){

          if(this.editRow != undefined){
             $('#box').datagrid('endEdit',this.editRow);
           }

          if(this.editRow == undefined){
             var index = $('#box').datagrid('getRowIndex',rows[0]);
             $('#save,#redo').show();
             $('#box').datagrid('beginEdit',index);
             this.editRow = index;
             $('#box').datagrid('unselectRow',index);             
           } 

         }else{
           $.messager.alert('警告','修改必须或只能选择一行','warning');
         }    
     },

     remove:function(){
        var rows = $('#box').datagrid('getSelections');
        if(rows.length > 0){
          $.messager.infirm('确定操作','你正在要删除所选的记录吗？',function(flag){
             if(flag){
               var ids = [];
               for(var i= 0;i<rows.length;i++){
                   ids.push(rows[i].id);
                }
                 console.log(ids.join(','));

                $.ajax({
                     type:'POST',
                     url:'delete.php',
                     data:{
                       ids:ids.join(','),
                    },
                     beforeSend:function(){
                         $('#box').datagrid('loading');
                    },
                     success:function(data){
                        if(data){
                         $('#box').datagrid('loaded');
                         $('#box').datagrid('load');  
                         $('#box').datagrid('unselectAll'); 
                         $.messager.show({
                           title:'提示',
                           msg:data + '个用户被删除！',
                          });                         
                        }
                    },
                 });
              }
           });  
        }else{
          $.messager.alert('提示','请选择要删除的记录！','info');
       }
     },     
   };

     $('#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:'id',
               title:'编号',
               sortable:true,
               width：100,
               checkbox:true,
             },
             {
               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',

        onDblClickRow:function(rowIdex,rowData){

         if(obj.editRow != undefined){
          $('#box').datagrid('endEdit',obj.editRow);
        }

         if(obj.editRow == undefined){
          $('#save,#redo').show();
          $('#box').datagrid('beginEdit',rowIndex);
          obj.editRow = rowIndex;
  }         
},
        onAfterEdit:function(rowIndex,rowData,changes){
         $('#save,#redo').hidden();

         var inserted = $('#box').datagrid('getChanges','inserted');
         var updated = $('#box').datagrid('getChanger','updated');

         var url = info ='';
         
         //新增用户
         if(inserted.length > 0){
           url:'add.php',
           info:'新增', 
        }

        //修改用户
         if(updated.length > 0){
            url:'update.php',
           info:'修改',                 
       }

           $.ajax({
                     type:'POST',
                     url:url,
                     data:{
                       row:rowData,
                    },
                     beforeSend:function(){
                         $('#box').datagrid('loading');
                    },
                     success:function(data){
                        if(data){
                         $('#box').datagrid('loaded');
                         $('#box').datagrid('load');  
                         $('#box').datagrid('unselectAll'); 
                         $.messager.show({
                           title:'提示',
                           msg:data + '个用户被'+info+'成功！',
                          });
                          obj.editRow = undefined;                         
                        }
                    },
                 });
          //console.log(rowDate);
   },
});
[
  {
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "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

   //记得是：user.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 id,user,email,data FROM think_user $sql ORDER BY $order $sort LIMIT $first,$pageSize") or die('SQL 错误！');
   $total = mysql_num_rows(mysql_query("SELECT id,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();
?>
<?php

   //记得是：delete.php

   require 'config.hph';

   $ids = $_POST['ids'];

   mysql_query("DELETE FROM think_user WHERE id IN ($ids)") or die('SQL 错误！');

   echo mysql_affected_rows();

   mysql_close();
?>
<?php

   //记得是：add.php

    require 'config.hph';

    $row = $_POST['row'];
    $user = $_row['user'];
    $email = $_row['email'];
    $date = $_row['date'];

   mysql_query("INSERT INTO think_user (user,email,date) VALUE ('$user','$email','$date') ") or die('SQL 错误！');

   echo mysql_affected_rows();

   mysql_close();

?>
<?php

   //记得是：update.php

    require 'config.hph';

    $row = $_POST['row'];
    $id = $_row['id'];
    $user = $_row['user'];
    $email = $_row['email'];
    $date = $_row['date'];

   mysql_query("UPDATE think_user SET user ='$user',email ='$email',date ='$date' where id='$id'") or die('SQL 错误！');

   echo mysql_affected_rows();

   mysql_close();

?>

 

 

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/1103476590

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

JQuery EasyUI+Java实现web管理系统
Slark的博客
05-10 1万+
各行各业需要各种各样的web管理系统，基本功能无非就是增删改查，简单的可以很简单，复杂的也可以很复杂。当然，只是最牛逼和最用心的人会做出用户体验最好的管理系统。 当然了，我的web管理系统就做的很简单也很粗糙了，前端使用常见网站模板样式+JQuery EasyUI组件，前后端使用JSON传送数据，后端语言使用Java，与MySQL数据库交互采用DbUtils。 关于自定义样式 这个主要包
jQuery EasyUI 1.9.4 中文帮助文档　离线chm
最新发布
04-19
这是一套关于jQuery EasyUI的中文帮助文档，在线帮助文档 进行整理，生成chm文件，便于开发时或者离线对jquery easyi控 件的属性、文法、事件等内容的查看。 jQuery EasyUI 版本1.9.4。文档为chm格式，方便开发...
jqGrid行编辑配置，方法，事件
qq_27009517的博客
05-19 4886
用户用鼠标点击选择一行，jqGrid将可编辑的字段转换为数据输入单元，如上面图所示。不可编辑的列，如id，不会转为可输入单元，而是保持不变。可以通过配置colModel来实现。完成修改后，按下“enter”键提交数据到服务器。 软件要求和安装 　　要使用行编辑功能，需要在jqGrid下载页面勾选Inline Editing和Common modules，然后下载。下载地址：http://www.trirand.com/blog/?page_id=6 　　要看元代可以从src目...
李炎恢 DataGrid(数据表格)组件6 修改删除
Java_c#
07-10 299
<html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <script src="~/easyui/jquery.min.js"></script> <script ...
01EasyUI - EasyUI简介
阿甘兄
04-17 564
介绍 Query EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。 easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。 easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。 HTML 网页的完整框架。 ...
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
jQuery EasyUI的api
05-09
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
jQuery EasyUI 1.3.6 离线简体中文API文档
04-12
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
jQuery EasyUI 1.9.4 chm文档
03-07
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
从零开始学习jQuery pdf
09-08
从零开始学习jQuery pdf，第一篇：开天辟地入门篇；第二篇：jQuery最重要的部分——万能的选择器；第三章：管理Jquery包装集；第四章：使用jQuery操作元素的属性与样式；第五篇：事件与事件对象……
jQueryEasyUI从零开始学源码part1
01-03
《jQueryEasyUI从零开始学》源码，一共分2个部分，这是第一部分
从零开始学习jQuery.pdf
08-20
从零开始学习jQuery.pdf 从零开始学习jQuery.pdf
从零开始学习jQuery
07-11
从零开始学习jQuery，欢迎新生下载使用！很好适合自学
从零开始学习jQuery系列教程
12-30
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.
kendoUI行编辑器的使用grid.editRow($("#grid tr:eq(1)"))无效
Behomesick的博客
11-23 3986
1.api源码实例         Kendo UI Snippet                            $("#grid").kendoGrid({   columns: [     { field: "name" },     { field: "age" }   ],   dataSou
Object.assign是什么意思啊？
肖肖肖丽珠的博客
09-27 2944
使用到的地方有 1，编辑table的某一行的时候。获取哪一行的数据给编辑的表格。 handleEdit: function (index, row) {                 this.editFormVisible = true;                 this.editForm = Object.assign({}, row);             }, 2，提交...
js+ajax+jquery+easyui从入门到精通（项目实战）
07-16
1.javascript从入门到精通，为学习ajax打基础；2.ajax技术从零开始学，深入研究ajax的原理及使用，通过一些使用案例讲解；3.easyui从入门到精通课程，详细介绍各种常用控件的使用方法，结合项目模块实战；4.jquery应用：主要讲解对复杂及常用ui界面的设计，利用jquery技术基础，熟练掌握实现各种功能的技巧。
从零开始学jquery
02-24
从零开始学jquery，一个非常好的教程！！！
jQuery EasyUI 1.3.2 实例详解
标题“jquery-easyui-1.3.2”指向的是一个特定版本的前端开发框架jQuery EasyUI的版本号。jQuery EasyUI是一个基于jQuery的UI库，它提供了多种预先设计好的界面组件，帮助开发者快速构建交互式和友好的网页应用界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值