JQuery Smart UI Plugins介绍（2）— 列表控件(Grid)

　　有不少朋友反应说JQuery Smart UI网站上的demo和代码下载不了，这里我说明一下，所有代码都是放在DBBank中，是可以匿名下载的，不过有时会弹出登陆框，具体原因还不知道，大家在把页面刷新一下，大多数情况应该就可以下了。以后有时间，会将下载放到其他的空间。

 　　另外，不少的朋友问道JQuery Smart UI与JQuery UI，JQuery EasyUI等插件的异同，从某种特性上说，两者的类型既相同也不相同，JQuery Smart UI并不是以Plugin的功能丰富为卖点，其核心内容是纯前台开发的ajax开发框架、前后台统一数据接口的数据交互，快捷开发等内容。但所包含的各种的插件与各种JQuery插件类似。但Smart UI都是围绕着开发框架，以应用开发和实用为主，可能功能上相对会比较弱些。详细的内容请参见：《JQuery Smart UI简介系列》 。此外，Smart UI也不排斥其他的插件，针对“外来”的插件也有一套引入方案，后面版本Smart UI会陆续的引入一些优秀的JQuery插件。

 

　　上篇介绍了基础控件中的chooser,另外基础控件中还包括（Button、DatePicker等）使用都比较简单，在此不多做介绍。本篇主要介绍的是列表控件

• Grid

　　

　Grid主要功能如下：

1. 支持Ajax数据源和固定数据源
2. 针对基础数据类型进行格式化，如：int、currence、float、date、datetime、bool、enum
3. 表头排序、表头大小设置、固定表头
4. 序号列，单选、多选列、自定义列
5. 翻页

与其他的JQuery Grid插件比较起来功能的确显的很“寒碜”，不过还算比较小巧，非压缩版24k，压缩后10k左右。

 

Html代码：

 

< div id ="grid" ></ div >

 

JS代码:

代码

　　　　 var datasource = [
{ U_Name: " 11 " , U_NO: " 444 " , U_Brithday: " 2010-7-25 " , U_Salary: " 99 " , U_Type: " 4 " , U_Sex: " 1 " , U_Desc: " 正正正正正正 " }
, { U_Name: " 112 " , U_NO: " 555 " , U_Brithday: " 2010-7-25 " , U_Salary: " 99 " , U_Type: " 2 " , U_Sex: " 1 " , U_Desc: " 正正正正正正 " }
, { U_Name: " 122 " , U_NO: " 66 " , U_Brithday: " 2010-7-25 " , U_Salary: " 99 " , U_Type: " 1 " , U_Sex: " 1 " , U_Desc: " 正正正正正正 " }
, { U_Name: " 13 " , U_NO: " 77 " , U_Brithday: " 2010-7-25 " , U_Salary: " 99 " , U_Type: " 2 " , U_Sex: " 1 " , U_Desc: " 正正正正正正 " }
];
var columns = [
{ name: " 字符 " , field: " U_Name " , width: ' 60px ' }
, { name: " 数字 " , field: " U_NO " , width: ' 60px ' , sort: true , type: ' num ' }
, { name: " 日期 " , field: " U_Brithday " , width: ' 80px ' , sort: true , type: ' date ' }
, { name: " 货币 " , field: " U_Salary " , width: ' 60px ' , sort: true , type: ' cur ' , format: 2 }
, { name: " 枚举 " , field: " U_Sex " , width: ' 50px ' , sort: true , type: ' enum ' , format: ' gender ' }
, { name: " 长字段 " , field: " U_Desc " , width: ' 120px ' }

　　　　　　　, { name: "自定义列", width: '120px', custom: '<a>${U_Name}</a>' }
];

　　　

　　　　　 // 固定数据源
$( " #grid " ).gridview({ width: 600 , height: 250 ,columns: columns}, datasource, totalrecold);
// ajax数据源
$( " #grid " ).gridview({ width: 600 , height: 250 ,columns: columns, ajax: { url: ' fn_us01 ' , data: { id: 1 , name: 2 }} });
// 复杂属性
$( " #grid " ).gridview({ width: 600 , height: 250 , columns: columns, showchk: true , chkfield: ' U_NO ' ,
showradio: true , radiofield: ' U_NO ' , sort: ' U_Brithday desc ' ,
fnBuilded: function (items, datas) { items.each( function (i) { var td = $( this ).children( ' td:eq(3) ' ); td.text(td.text() + ' _ ' + datas[i].U_Type); }) }
, fnSorted: function (ops, grid) { alert( " sort: " + ops.sort + ' \r\npageindex: ' + ops.pageindex); }
}, users, totalrecold, function (pageindex, pagesize) { $( " #grid " ).girdviewReload({ pageindex: pageindex, pagesize: pagesize }, pageindex == 1 ? users : users2); });

 

Grid的初始化方法为：

$.fn.gridview = function (options, datasource, totalrecord, fnpagechanged)

 

 

代码说明：

　　datasource：为固定数据源，json格式。

　　columns：列设置集合。

事件说明：

　　fnpagechanged (pageindex, pagesize)：自定义的翻页事件，在系统翻页执行之后执行。pageindex：当前页码，pagesize：当前页显示条数

　　fnBuilded(items, datas)：根据数据源绑定之后执行的方法，items：列表中的项（tr）集合，类型是JQuery对象集合，datas：数据源，既datasource。该方法类似.net gridview中的DataItemBinded事件，使用该方法可以实现对列表的特殊控制。

　　fnSorted(ops, grid)：排序事件，ops排序参数，ops.sort:排序语句，ops.pageindex当前页，ops.pagesize当前页显示条数。

 

整个grid初始化的流程是，先根据列设置生成表头和表头事件、然后生成数据项模版，并且进行缓存，然后判断是否需要进行ajax请求数据，然后根据项模版和数据，之后再执行fnBuilded。

注：初始化之后如果需要重新绑定列表时（例如查询），就不能在使用初始化的方法，需要使用

$.fn.girdviewReload = function (options, datasource)

 再次options则只初始化方法的简化版本，只含有ajax信息（请求和查询条件）和翻页信息。

 更多详细的内大家可以参考API说明。

详细API和Demo连接

 

　　在这里先透露一下，Smart UI后面会有一个版本会特别针对grid进行扩展。比如，列编辑功能（两种模式）；一种是配合Smart UI开发框架使用，无需在grid内设置就能在对应的单元格生成可以实现各种数据类型的控件，与大家见到的编辑页面生成的控件一样。另外一种的是全局性质的“AnyEditor”，将编辑控件与显示端控件结合起来，实现任何地方的编辑功能。

 

　　最近Plugin介绍这两篇写的比较简单，还请大家海涵，主要是想把几个基础的控件简单介绍一下，后面在看开发框架的实例实用系列时会更加方便一些，因为实例中的控件接口都重新封装过，参数配置也在不同位置配置，因此必须先简单了解一下基础控件的情况。

 

 

转载于:https://www.cnblogs.com/zhh8077/archive/2010/12/07/1899360.html