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",  '60px' }
            , { name: "数字", field: "U_NO",  '60px', sort: true, type: 'num' }
            , { name: "日期", field: "U_Brithday",  '80px', sort: true, type: 'date' }
            , { name: "货币", field: "U_Salary",  '60px', sort: true, type: 'cur', format: 2 }
            , { name: "枚举", field: "U_Sex",  '50px', sort: true, type: 'enum', format: 'gender' }
            , { name: "长字段", field: "U_Desc",  '120px' }
　　　　　　　, { name: "自定义列",  '120px', custom: '<a>${U_Name}</a>' }
            ];        

 　　　
　　　　　//固定数据源
        $("#grid").gridview({  600, height: 250,columns: columns}, datasource, totalrecold);
        //ajax数据源
        $("#grid").gridview({  600, height: 250,columns: columns, ajax: { url: 'fn_us01', data: { id: 1, name: 2}} });
        //复杂属性
        $("#grid").gridview({  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介绍这两篇写的比较简单，还请大家海涵，主要是想把几个基础的控件简单介绍一下，后面在看开发框架的实例实用系列时会更加方便一些，因为实例中的控件接口都重新封装过，参数配置也在不同位置配置，因此必须先简单了解一下基础控件的情况。