由于项目原因，网站后台需要对用户信息进行各种操作，有时还需要进行批量操作，所以首先需要将用户信息展示出来，查了不少资料。发现Jquery EasyUI确实是一个不错的选择，功能强大，文档也比较全面，而且容易上手。今天就把自己在项目中用到的功能做了一个总结。生成数据表格如下所示:

接下来上代码

界面html及js代码

 <!DOCTYPE html>

 <html>

   <head>

       <meta charset="utf-8"/>

       <title>武侠小说人物</title>

       <!--导入相关插件-->

       <script src="easyui/jquery.min.js"></script>

       <script src="easyui/jquery.easyui.min.js"></script>

       <script src="easyui/plugins/jquery.datagrid.js"></script>

       <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

       <link rel="stylesheet" href="easyui/themes/default/easyui.css"/>

       <link rel="stylesheet" href="easyui/themes/icon.css"/>

   </head>

   <body>

       <table id="mytb" style="width:200px;height:300px">

       </table>

       <script type="text/javascript">

       $('#mytb').datagrid({

           title: '武侠小说人物',  //表格名称

           iconCls: 'icon-edit',  //图标

           width:480,   //表格宽度

           height:'auto',   //表格高度，可指定高度，可自动

           border:true,  //表格是否显示边框

           url:'datagrid.php',   //获取表格数据时请求的地址

           columns:[[

             {field:'id',title:'编号',width:100,hidden:false},

             {field:'name',title:'姓名',width:100},

             {field:'age',title:'年龄',width:100},

             {field:'school',title:'江湖流派',width:100}

           ]],

           pagination:true,//如果表格需要支持分页，必须设置该选项为true

           pageSize:5,   //表格中每页显示的行数

           pageList:[5,10,15],

           rownumbers:true,   //是否显示行号

           nowrap: false,

           striped: true,  //奇偶行是否使用不同的颜色

           method:'get',   //表格数据获取方式,请求地址是上面定义的url

           sortName: 'ID',  //按照ID列的值排序

           sortOrder: 'desc',  //使用倒序排序

           idField: 'id',

           loadMsg:'数据正在努力加载，请稍后...',   //加载数据时显示提示信息

           frozenColumns: [[  //固定在表格左侧的栏

                       {field: 'ck', checkbox: true},

                     ]],

           toolbar: [{

                     text: '添加',

                     iconCls: 'icon-add',

                     handler: function() {

                         getSelectIds('mytb','没有选择');

                     }

                 }, '-', {

                     text: '删除',

                     iconCls: 'icon-cut',

                     handler: function() {

                       getSelectIds('mytb','没有选择');

                     }

                 }, '-', {

                     text: '修改',

                     iconCls: 'icon-save',

                     handler: function() {

                         getSelectIds('mytb','没有选择');

                     }

                 }]

         });

       </script>

   </body>

 </html>

后台PHP获取数据代码

 <?php

   $link=mysql_connect('localhost','root',''); //连接数据库获取数据

   mysql_select_db('test');  //选择数据库

   mysql_set_charset('utf8'); //设置字符集，包括result，server等字符集

   //分页条件

   $page=(isset($_GET['page']))?intval($_GET['page']):1;

   $rows=(isset($_GET['rows']))?intval($_GET['rows']):10;

   $offset=($page-1)*$rows;

   $sql="select * from user limit $offset,$rows";

   $countnum="select count(*) as total from user";//查询数据总数

   $res=mysql_query($sql);

   $datanum=mysql_query($countnum);

   $num=mysql_fetch_assoc($datanum);

   $cdata=array();

 while($row=mysql_fetch_array($res)){

     $cdata[]=$row;

   }

 $data=array();

 foreach($cdata as $k=>$v){

   $data['rows'][$k]['id']=$v['id'];

   $data['rows'][$k]['name']=$v['name'];

   $data['rows'][$k]['age']=$v['age'];

   $data['rows'][$k]['school']=$v['school'];

 }

 $data['total']=$num['total'];  //总数必须要分配过去,分页需要

 echo json_encode($data);

  ?>

Jquery EasyUI datagrid后台数据表格生成及分页详解的更多相关文章

  1. 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  2. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  3. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  4. ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

    ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...

  5. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  6. 用jQuery+easyUI遇到的几个插件与文件详解

    很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox.combobox.panel.checkbox.tree.datagrid等等 ...

  7. jquery easyui datagrid实现数据改动

    1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...

  8. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  9. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

随机推荐

  1. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  2. 按键精灵http.定义getWeb

    Function 取网页源码(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&quo ...

  3. Objective-C Runtime 运行时之二：成员变量与属性(转载)

    在前面一篇文章中,我们介绍了Runtime中与类和对象相关的内容,从这章开始,我们将讨论类实现细节相关的内容,主要包括类中成员变量,属性,方法,协议与分类的实现. 本章的主要内容将聚集在Runtime ...

  4. SweetTips: 快意灵动的Android提示库!

    此文章是我在简书的文章,自行搬到博客园.简书地址:SweetTips: 快意灵动的Android提示库! 源码及所在DEMO已上传至GitHub:SweetTips,欢迎大家提Bug,喜欢的话记得St ...

  5. 解决asp.net中“从客户端中检测到有潜在危险的Request.Form值”的错误

    修改Web.config,增加requestValidationMode="2.0"属性值 <system.web> <httpRuntime requestVa ...

  6. lucene Filter过滤器

    摘自:http://iamyida.iteye.com/blog/2199368 1.TermFilter:就是按照Term去过滤,跟TermQuery类似: Filter filter = new ...

  7. nodejs学习随笔

    <一> 简述nodejs (社区:www.npmjs.com)可查找一些第三方模块. nodejs是可以让js运行在浏览器之外的服务器端的平台,实现了文件系统.模块.包.操作系统API.网 ...

  8. windows线程池四种情形（win核心读书笔记）

    windows线程池四种情形(win核心读书笔记) Mircosoft从Windows2000引入线程池API,并在Vista后对线程池重新构架,引入新的线程池API.以下所有线程池函数均适用于Vis ...

  9. 关于微信端不支持window.location.reload()

    今天写了一个调查问卷页面,项目经理说要表单提交之后页面刷新,之间没沟通清楚,以为整个页面重载,所以刚开始就用了window.location.reload()的方法. 但是发现,在微信直接打开之后,居 ...

  10. [转] Android root 原理

    欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/5572640.html 0x00 关于root linux和类Unix系统的最初设计都是针对多用 ...