你的位置:首页 > Java教程

[Java教程]jtable插件api


官网2016-03-15

事例图:

一、客户端配置

1、

paging   boolean  default:false

  配置是否分页,果断改为true。

2、

pageList  string  default:'normal' 

  有两种样式可以选择:
    minimal 就是,只显示第一页最后一个上一页下一页图标,就是图上第一个红色框起来的前后各2个共4个翻页图标
    noraml  就是,在minimal的基础上再把页码显示出来,图上就是第一个红色框起来的数字部分(1,2...12,13)翻页快捷图标

3、

pageSize  number  default:10 

  每页显示的记录条数,默认10条有点少,一般改成20条

4、

pageSizes  array  default:[10,25,50,100,250,500]

   图中第三个红色框起来的下拉列表,一般改成自己喜欢的[20,30,40,50],默认每页可选择显示500条记录

5、

pageSizeChangeArea  boolean  default:true 

  图中第三个红色框起来的下拉列表是否显示,
    如果不显示(false),其实pageSizes的配置也就无意义了,用户无法选择
    有时候要的就是这种效果,定死了每页显示多少条,不许更改

6、

gotoPageArea   string default:combobox textbox/none 

  图中第二个红色框起来,跳到第几页显示的样式,默认就是一个下拉列表
    万一页数太多会是什么效果呢?还是改成textbox吧,让用户自己输入
7、

sorting   boolean   default: false

  sorting是否按一定顺序排列,默认为否。

二、具体用法

1、引入js和css

<link href="jquery-ui-1.10.1.custom.min.css" ref="stylesheet" type="text/css">
<link href="jqueryui/jtable_jqueryui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jtable.js"></script>
 

2、页面容器

<div id="main"></div>

3、配置

 1 <script type="text/javascript"> 2   $(document).ready(function () { 3     $('#main').jtable({ 4       title: 'Table of people', 5       actions: { 6         listAction: 'data/jtable.json'//url地址路径 7       }, 8       fields: { 9         PersonId: {10           key: true,11           list: false12         },13         Name: {14           title: 'Author Name',15           width: '40%'16         },17         Age: {18           title: 'Age',19           width: '20%'20         },21         RecordDate: {22           title: 'Record date',23           width: '30%',24           type: 'date',25           create: false,26           edit: false27         }28       }29     });30   $('#main').jtable('load');//加载31   });32 </script>