由于项目原因，网站后台需要对用户信息进行各种操作，有时还需要进行批量操作，所以首先需要将用户信息展示出来，查了不少资料。发现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. TypeScript 学习一 参数，函数，析构表达式

    1,TypeScript是由谷歌开发的,并且新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  2. php笔记(六)PHP类与对象之对象接口

    接口的实现 <?php //interface 关键字用于定义一个接口 interface ICanEat{ //接口里面的方法不需要实现 public function eat($food); ...

  3. 灾情巡视C语言代码

    /*"水灾巡视问题"模拟退火算法.这是一个推销员问题,本题有53个点,所有可能性大约为exp(53),目前没有好方法求出精确解,既然求不出精确解,我们使用模拟退火法求出一个较优解, ...

  4. CVE-2015-0057 POC构造 & 利用分析(2015.7)

    CVE-2015-0057 POC构造 & 利用分析 主要内容: 构造POC 利用思路 0x00 初探 从这篇文章可以获知: 1.问题出在 win32k!xxxEnableWndSBArrow ...

  5. LWP::UserAgent介绍3 -> cookie设置

    use LWP::UserAgent; use HTTP::Cookies; my $ua = LWP::UserAgent->new; $ua->cookie_jar(HTTP::Coo ...

  6. Gradle学习草稿

    参考博客:http://www.cnblogs.com/davenkin/p/gradle-learning-1.html Android Plugin DSL Reference http://go ...

  7. 转：条件变量、pthread_cond_init

    1.初始化条件变量pthread_cond_init #include <pthread.h>int pthread_cond_init(pthread_cond_t *cv,const ...

  8. IOS APP 国际化（实现不跟随系统语言，不用重启应用,代码切换stroyboard ,xib ,图片，其他资源）

    http://www.cnblogs.com/tangbinblog/p/3898046.html

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

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

  10. fzu Problem 2128 最长子串（KMP + strstr 经典好题）

     Problem Description 问题很简单,给你一个字符串s,问s的子串中不包含s1,s2...sn的最长串有多长.  Input 输入包含多组数据.第一行为字符串s,字符串s的长度1到10 ...