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

    不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui com ...

  2. <hdu - 3999> The order of a Tree 水题 之 二叉搜索的数的先序输出

    这里是杭电hdu上的链接:http://acm.hdu.edu.cn/showproblem.php?pid=3999  Problem Description: As we know,the sha ...

  3. java 时间

    package com.grace.test; import java.text.DateFormat; import java.text.ParseException; import java.te ...

  4. logger日志工具类

    日志工厂类 package cn.itcast.utils; import java.util.logging.FileHandler; import java.util.logging.Handle ...

  5. linux安装bind with DLZ <NIOT>

    2015年6月11日 1.sudo wget ftp://ftp.isc.org/isc/bind9/9.10.1/bind-9.10.1.tar.gz  或者 使用“rz”命令 2.tar -zxv ...

  6. JAVA MONGODB group查询的UTC时间问题

    BasicDBList dateList = new BasicDBList(); dateList.add("$t"); dateList.add(28800000); DBOb ...

  7. spring No adapter for handler 错误

    为了实现controller对JSON数据的自动解析,在spring-mvc.xml文件中增加了 <bean class="org.springframework.web.servle ...

  8. css3实现进度条

    HTML 结构很简单,但不是 Single Element: <div class="spinner"><i></i></div> ...

  9. jsvc 以daemon方式运行tomcat

    原理: 使用jsvc来运行服务,没有了默认8005的shutdown端口: 主进程pid为1,fork 2个进程 运行方式参考:http://commons.apache.org/proper/com ...

  10. IOC(控制反转)

    一.容器与Bean 在Spring中,那些组成你应用程序的主体(backbone)及由Spring IoC容器所管理的对象,被称之为bean. 简单地讲,bean就是由Spring容器初始化.装配及管 ...