由于项目原因，网站后台需要对用户信息进行各种操作，有时还需要进行批量操作，所以首先需要将用户信息展示出来，查了不少资料。发现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. 搭建Gitlab

    这个周末好奇想搭建一个私有的Gitlab,以前折腾过一次.现在记录如下. 一.安装Ubuntu 16.04 LTS server amd64 到Virtual Box 二.安装gitlab服务器 按照 ...

  2. Filewatcher

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  3. android 给layout布局添加点击事件

    <方法一> 1,在代码中加入如下红色代码,不然会被包含在其中的控件把焦点抢占,此时子控件无需设置clickable和focuseable <RelativeLayout        ...

  4. Spring.net 学习IOC------属性注入

    我们就完成我们的第一个spring.net学习IOC的"hello world!". 1> 我们新建一个C# 的控制台项目名为Spring,然后引入Spring.Core.d ...

  5. 数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG，因为当前没有数据库备份

    结尾日志的问题 还原选择中去掉结尾日志就可以了 转载自:http://blog.csdn.net/aojiancc2/article/details/46316451

  6. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  7. sql 查看语句的性能

    SET STATISTICS TIME:看cpu时间   SET STATISTICS IO:关注scan count(计数)------查询读取的表数量:logical read( 逻辑读)次数

  8. Linux系统VPS/服务器安装WINDOWS桌面环境可以采用的几个方法

    我们公司的几个项目需要在WINDOWS桌面类型的界面操作,哪怕仅有一个浏览器远程操作也是可以的,我们运维部门得到的任务就是需要能在已有的Linux系统的VPS.服务器环境中能够远程操作,至少需要能可以 ...

  9. pull类型消息中间件-消息服务端(三)

    部署架构 消息存储 存储结构 MetaQ的存储结构是一种物理队列+逻辑队列的结构.如下图所示: Producer生产消息,根据消息的topic选择topic对应某一个分区,然后发送到这个分区对应的Br ...

  10. Linux服务器rsync自动备份

    一.在 server 端配置 1. 编辑配置文件 #vi /etc/rsyncd.conf 添加下面的配置参数: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默 ...