JQuery EasyUI表格操作实例代码解析

 

前段时间写过一篇关于Jquery EasyUI如何提交数据的文章：基于JQuery EasyUI框架的两种数据提交方式，经过这段时间的使用和学习，今天再次整理部分关于Jquery EasyUI表格编辑的相关操作,今天主要是对Jquery EasyUI的表格操作部分功能进行整理和说明。

(点击图片查看大图)

先做大概的分析和介绍，JQuery EasyUI表格操作实例代码Demo演示程序及代码下载在文章的最后有提供，如果有需要的朋友可以下载看一下。

1.用表格列出数据库中的数据

(点击图片查看大图)

我们想要像平时在网页表格中显示的一样利用Jquery EasyUI来实现数据的表格的显示，首先定义表格用于稍后显示数据。

<table id="tbdata"></table>

下面就是实现定义表格及显示数据的主要代码，field为数据字段名,title为界面显示的表头名称，最后的是对表格行数据的相关操作定义

 url: 'demo.php?gettype=json&rows='+rows+'&page='+page,
 title: '列表',
 width: 800,
 height:350,
 //height: 'auto',
 fitColumns: true, //滚动条
 columns:[[
  {field:'id',title:'ID',width:80},
  {field:'funname',title:'调用接口函数名',width:120},
  {field:'sip',title:'来源IP',width:80,align:'right'},
  {field:'sysname',title:'来源系统',width:80,align:'right'},
  {field:'rtime',title:'调用时间',width:250},
  {field:'action',title:'操作',width:80,align:'center',
   formatter:function(value,row,index){
    if (row.editing){
     var s = '<a href="#" οnclick="saverow('+index+')">Save</a> ';
     var c = '<a href="#" οnclick="cancelrow('+index+')">Cancel</a>';
     return s+c;
    } else {
     var e = '<a href="#" οnclick="editrow('+index+')"></a> ';
     var d = '<a href="#" οnclick="deleterow('+row.id+','+index+')">Delete</a>';
     return e+d;
    }
   }
  }
 ]],

通过url的链接及传递的显示函数(rows)和页码(page)的参数来控制页面显示的数据。接下来就是把数据传递进去，让表格能够显示

 for($ii=0; $ii<$rows; $ii++)
 {
  $rowA[]=array(
   'productid'=>'RP-SN-'.mt_rand(10,999),
   'unitcost'=>mt_rand(10,999).'.00',
   'status'=>'P'.$ii,
   'listprice'=>mt_rand(10,999).'.00',
   'attr1'=>'G'.$page,
   'itemid'=>'E-'.$rows,
  );
 }
 $dataA=array(
  'total' =>30,
  'rows' =>$rowA,
 );
 echo(json_encode($dataA));exit();

在这里我未连接数据库，简单创建了一些随机数用于演示，其实使用数据库查询也很简单，如下面的代码：

 $cnum = $rows * ($page-1);
 $sql = "select id,funname,sip,sysname,rtime from webservice_log order by id desc limit $cnum ,$rows";
 $res = mysql_query($sql);
 while($row = mysql_fetch_array($res))
 {
  (int)$cnum ++;
  $rowA[]=array(
   'id'=>$row['id'],
   'funname'=>$row['funname'],
   'sip'=>$row['sip'],
   'sysname'=>iconv("GBK","UTF-8",$sourA[$row['sysname']]),
   'rtime'=>date('Y-m-d H:i:s',$row['rtime']),
  );
 }
 $dataA=array(
  'total' =>$total,
  'rows' =>$rowA,
 );
 echo(json_encode($dataA));exit();

上面的代码比较简单，相信大家一看就能明白的，通过limit来取到指定范围内的记录数。

2.获取表格某一列的值

我们如果要对某一行数据进行修改，删除操作时，肯定是需要获取到该行记录的一个key值，无论是
直接传值还是通过id来获取，而在这里取值其实是很简单的，参考这段代码：

 formatter:function(value,row,index){
  if (row.editing){
   var s = '<a href="#" οnclick="saverow('+index+')">Save</a> ';
   var c = '<a href="#" οnclick="cancelrow('+index+')">Cancel</a>';
   return s+c;
  } else {
   var e = '<a href="#" οnclick="editrow('+index+')"></a> ';
   var d = '<a href="#" οnclick="deleterow('+row.id+','+index+')">Delete</a>';
   return e+d;
  }

上面的函数获取到的row应该是一个对象，然后我们要取得某一列的值时，直接使用row.字段名的形式，如上面的row.id，这样就能很方便的获取到该key值，然后通过它直接就可以对数据库中的这条记录进行操作了，而index则为行索引，它可以用来直接在页面上显示出页面不刷新而记录数实时变化的效果。

3.修改某一行的值
(点击图片查看大图)

通过下面的这段代码可以对点击修改按钮时可以修改按钮的显示文字，把修改和删除按钮文字改为保存和取消，其实还是比较简单的

formatter:function(value,row,index){
 if (row.editing){
 var s = '<a href="#" οnclick="saverow('+index+','+row.id+')">保存</a> ';
 var c = '<a href="#" οnclick="cancelrow('+index+')">取消</a>';
 return s+c;
 } else {
 var e = '<a href="#" οnclick="editrow('+index+')">编辑</a> ';
 var d = '<a href="#" οnclick="deleterow('+index+','+row.id+')">删除</a>';
 return e+d;
 }
 }

如果要修改某一列的话，则在数据显示的代码段的位置，指定列后面加上下面的代码：

    formatter:function(value){
     return value;
    },
    editor:{
     type:'text',
     options:{
      valueField:'burl',
      textField:'burl',
      data:burl,
      required:true
     }
    }

具体有不理解的可以参考代码，最后提供一个完整的表格操作代码演示，下载地址稍后提供。

简单演示地址：http://www.hongxincao.com/demo/url.php

Jquery EasyUI DEMO演示代码下载：Jquery-EasyUI-Demo-www.hongxincao.com-.rar

文章来源：红心草

原文地址：http://www.hongxincao.com/archives/612.html