JQuery EasyUI(37)

最新推荐文章于 2024-12-17 20:05:44 发布
最新推荐文章于 2024-12-17 20:05:44 发布
阅读量180 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

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

学习要点：

  1. 修改删除功能

 一、修改删除功能

列属性，在columns里设置的属性
属性名值说明
checkboxboolean如果为true，则显示复选框，该复选框列固定宽度。
 DataGrid方法
属性名值说明
getSelectionsnone返回所有被选中的行，当没有记录被选中的时候将返回一个空数据。
getRowIndexrow获取到当前行的索引。
unselectRowindex取消指定选择的行。
DataGrid事件
属性名值说明
onDblClinkRowrowindex,rowData在用户双击一行的时候触发，参数包括：rowIndex：点击行的索引值，该索引值从0开始。rowDate：对应于点击行的记录。

 

<!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(','));
              }
           });  
        }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();
         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
   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();
?>

 

 

作者：Roger_CoderLife

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

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

jQuery EasyUI快速入门01
jh9758的博客
05-04 280
一、jQuery EasyUI框架概述 1、什么是jQuery EasyUI? JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架 2、 jQuery Easy的作用 既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。 3、EasyUI的目录说明 ① 下载路径 ...
jQuery EasyUI 扩展
lly202406的博客
03-13 400
自定义组件是扩展 jQuery EasyUI 的常用方法之一。通过自定义组件，可以创建具有特定功能的 UI 控件，以满足项目需求。// 组件初始化代码});// 默认参数通过扩展 jQuery EasyUI 的弹出框组件，可以创建具有自定义样式的弹出框。text: '确定',// 确定按钮点击事件}, {text: '取消',// 取消按钮点击事件}]});});});jQuery EasyUI 是一个功能强大的 UI 库，通过扩展可以满足各种场景下的需求。
jeecg自定义查询
小静的专栏
07-22 3470
<div style="width:100%;height:350px;"> <div id="containerPie" style="float: left; width: 30%; height:100%;"></div> </div> <div style="width: 100%; height:450px;"> &lt...
JQuery EasyUI
m0_61916351的博客
11-19 676
JQuery EasyUI简单应用
jQuery EasyUI
jongsuk_sun的博客
07-01 280
事例文档：http://www.92ui.net/ easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。 一，布局： 将系统页面分成5各部分完成布局，分别是north，east，south，west，center 参考：https://blog...
jQuery EasyUI详解-EasyUI环境配置
G11176593的博客
11-12 419
点击Freeware Edition下面的Download下载即可（猫哥下载的是1.5.1版本，以此版本为准进行演示，说实话我也没用过1.5.1，之前用的还是老版本的，不过程序员要一直更新自己的知识库，千万不要执着于熟悉的旧版，要争当时代的弄潮儿，哈哈哈）。第六步，好了，终于可以开始使用easyui了，打开默认的index.jsp文件，编辑如下，一定要注意的是，引用了这四个文件，我们就可以畅快的使用EasyUI了。第二步，解压后，新建文件夹easyui，将压缩包在easyui文件夹下解压。
JQuery easyui的等待效果
jackson61的博客
11-09 472
不过我还是觉得如果可以在平时收集一些比较好的这些代码，或者写出来一些（借鉴一下别人的也未尝不可），要用的时候稍作修改即可派上用场，相信这样不用插件也可以做出一个比较好的界面，总之我是对插件神马的持否认态度的。
jQuery EasyUI_01 快速入门 基础入门&使用
m0_60786924的博客
05-05 1630
一、jQuery EasyUI 简介 1. jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局) 2. jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。 easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。 easyui 提供......
探索 JQuery EasyUI：构建简单易用的前端页面
繁依Fanyi的博客
06-19 1680
介绍 当我们站在网页开发的浩瀚世界中，眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中，JQuery EasyUI 如一位指路明灯，为我们提供了一条清晰的航线。 1.1 什么是 JQuery EasyUI？ JQuery EasyUI，简单来说，就是一款基于 JQuery 的用户界面插件库。无论是初学者还是老手，在网页开发中都能从中获得实实在在的帮助。它的灵感源自于易用性与美观的追求，将复杂的用户界面元素，如布局、表单、表格等，简化成了易于使用的组件，让开发者能够更专注于业务逻辑的实现，而不必过多
JQuery EasyUI -- 日历选择器
2401_89213302的博客
12-17 692
最基本的原因是：jQuery EasyUI 很少用于 Web 应用的前台页面，一般用于后台的 UI 或者企业级应用的 UI（较为重）。但问题是，使用智能加载，你编码的难度和成本都提高了，效率降低，并且智能加载的 JS 文件数量还是非常多的，并不会提高太大的速度，反而因为 js 文件较多，被搜索引擎要求合并优化。一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。使用 easyloader 智能加载，是根据你使用的 UI 组件按需加载。
jQuery EasyUI 1.9.4 中文帮助文档　离线chm
04-19
这是一套关于jQuery EasyUI的中文帮助文档，在线帮助文档 进行整理，生成chm文件，便于开发时或者离线对jquery easyi控 件的属性、文法、事件等内容的查看。 jQuery EasyUI 版本1.9.4。文档为chm格式，方便开发...
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控件的属性、文法、事件等内容的查看。
东财1109考试批次《工程项目管理》复习题.pdf
06-13
东财1109考试批次《工程项目管理》复习题.pdf
中国互联网络热点调查报告.docx
06-13
中国互联网络热点调查报告.docx
农业电商服务系统_30249--论文.zip
06-13
java+mysql源代码+配套文档+数据库+答辩教程
铁路订票平台小程序pf.zip
最新发布
06-13
java+mysql源代码+配套文档+数据库+答辩教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值