由于项目原因，网站后台需要对用户信息进行各种操作，有时还需要进行批量操作，所以首先需要将用户信息展示出来，查了不少资料。发现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. Gentoo解决Windows系统txt文本中文乱码问题

    Linux与Windows系统语言编码区别 在Linux操作系统下,我们有时打开在windows下的txt文件,发现在windows下能正常显示的txt文件出现了中文乱码. 出现这种情况的原因为两种操 ...

  2. Regmon7.04绿色版(注册表变动实时监视工具)

    Regmon V7.04 简繁中文绿色版 软件大小: 155KB软件语言: 简体中文运行环境:Win9x/NT/2000/XP/2003/软件类别:国外软件 / 免费版 / 系统其它Regmon Re ...

  3. 项目有叉号， 但是没有代码错误的时候， 是JDK版本的问题

    windows---proferences---java--compiler进入项目--properties---java Compiler进入项目--properties---Myeclipse-- ...

  4. 学会Nodejs 的require和exports

    NodeJs中模块的导入和导出,是最基本的概念,但是看了之后,心里还是有一些疑惑的地方,比如: 1.有两个文件:part.js 和 main.js,main.js中要想使用part.js中定义的变量和 ...

  5. Python subprocess + timeout的命令执行

    Popen对象 poll() 判断是否执行完毕,执行完毕返回0,未执行完毕返回None terminate() 终止进程发送SIGTERM信号 raise 自定义返回错误 import time im ...

  6. vs2010帮助文档下载以及帮助查看器（H3Viewer）的使用

    在工作中遇到想查看vs2010的帮助文档.推荐使用H3Viewer.一个第三方的免费软件,独立于VS2010运行的帮助查看器.这方面的资料并不多.把本次自己使用的心得分享给大家. H3Viewer官方 ...

  7. javascript单例模式（懒汉 饿汉）

    第一种:懒汉模式 var Singleton=(function(){ var instantiated; //比较懒,在类加载时,不创建实例,因此类加载速度快,但运行时获取对象的速度慢 functi ...

  8. Android:内存优化的一些总结

    ______________________摘录于:http://www.cnblogs.com/yezhennan/p/5442557.html____________________ 1.大图片的 ...

  9. .Net cxy 提高效率

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...

  10. 【转】MapReduce的优化

    相信每个程序员在编程时都会问自己两个问题“我如何完成这个任务”,以及“怎么能让程序运行得更快”.同样,MapReduce计算模型的多次优化也是为了更好地解答这两个问题. MapReduce计算模型的优 ...