flexigrid的集成(一)

flexigrid的集成

首先看看这个grid组件的效果,如图:

上面是freemarker的自定义标签实现的列表，下面是flexigrid组件实现的。

初看有没有觉得很像ext？说实话我初看就觉得像ext，二期后面的设置，可能更加会让你觉得像。

1、flexigrid的集成步骤

首先肯定是到官网下载： https://jquery-plugins.net/flexigrid-for-jquery

选择demo，里面包括js、样式和icon图片。

下载后解压会看到

我直接将这三个文件的上级目录改名flexigrid，然后拷贝到项目的第三方组件目录下:

到此，flexigrid就集成完了，你在页面上值需要引入js和样式就可以畅快的fly了。我这里所有组件的引入是有一个专门的head.html文件，所以我在这个文件里引入，其他页面只要include这个head.html我就可以使用了。

2、flexigrid的简单使用

这个其实下载下来的demo里就有，不过一般人看起来还是会云里雾里的。这里我就说个我使用的具体页面为例子吧。

我这里是在页面点击一个按钮或链接弹开一个Dialog，我这里这个也是使用的jquery的Dialog，这里就略过了。有需要的话，下次可以也谢谢。自己上硬货了：

$("#upTypeGrid").flexigrid({

url : "${base}/admin/coship/dictionary/v_getTypeList.jspx?queryType=contentType",

dataType : 'json',

colModel : [

{

display : '<input type=\"checkbox\" name=\"check_all\" οnclick=\"checkBoxAll(this);\" id=\"check_all\" >',

name : 'checkAll',

width : 30,

sortable : false,

align : 'center',

process:checkSel

},

{

display : 'ID',

name : 'id',

width : 80,

sortable : true,

hide : true,

align : 'center'

}, {

display : '名称',

name : 'name',

width : 200,

sortable : true,

align : 'center'

}

, {

display : '上级分类', //如果不想在这里处理可以在后台降参数转为文字

name : 'parentId',

width : 150,

sortable : true,

align : 'center',

process : function(value,id){

//alert("value:"+value.innerHTML+"---id:"+id);

switch (value.innerHTML) {

case '75':

value.innerHTML = "<font>热门推荐</font>";

break;

case '76':

value.innerHTML = "<font>分类</font>";

break;

case '77':

value.innerHTML = "<font>专题</font>";

break;

}

}

},

{

display : '排序',

name : 'priority',

width : 100,

sortable : true,

align : 'center'

}],

buttons : [

//{name: '确定', bclass: 'add', onpress:buttonAct},

{name: '上架', bclass: 'add', onpress:buttonAct}

],

sortname : "id",

sortorder : "asc",

errormsg: '发生错误',

hideOnSubmit: true,

usepager : true,

useRp : true,

checkbox : true,// 是否要多选框

rowId : 'id',// 多选框绑定行的id

rp : 5,

rpOptions: [5, 10, 15, 20],

pagestat:"显示{from}到{to}条,共{total}条数据",

procmsg:"正在处理,请稍后...",

autoload: true,

query:'',

showTableToggleBtn : false,

height : 280

});

这里本来是没有checkbox的，自己扩展的，这个grid组件的多选就是在数据上点击下，如果要多选，就是设置checkbox : true,选中的数据就是行颜色变了，实际你打开浏览器调试工具会发现行增加了一个 trSelected样式，后面扩展的checkbox全选会用到这个特性。

补充下用到的几个自定义事件：

//行checkbox的设置

function checkSel(val,id){

val.innerHTML="<input type='checkbox' name='check_all' text='"+id+"' οnclick='addSoldUpType(this,"+id+")'>";

}

//grid列表全选事件

function checkBoxAll(allObj){

var checked = allObj.checked;

var checkIds = document.getElementsByName("check_all");

for(var i=1; i < checkIds.length; i++){

checkIds[i].checked = checked; //全选是通过代码将所有行的checkbox设置为checked的

}

$('#upTypeGrid td:nth-child(1) div input').each(function(i) {

var selId = $(this).attr("text");

addSoldUpType(this,selId);

});

}

//行checkbox点击事件

function addSoldUpType(ckObj,selId){

//alert(ckObj.checked)

selId = parseInt(selId);

if(ckObj.checked){ //选中的时候加入数组

selTypeArr.push(selId);

}else{ //反选择从数组里删除

var index = selTypeArr.indexOf(selId);

if (index > -1) {

selTypeArr.splice(index, 1);

}

}

//alert(selTypeArr.length)

}

//grid列表按钮事件(按钮是通过name属性匹配的，应该可以通过其他属性匹配，里面的逻辑你懂的）

function buttonAct(com, grid) {

switch (com) {

case "确定":

//TODO 写你的按钮点击事件

break;

case "上架":

//TODO 写你的按钮点击事件

break;

}

}

下面在看看怎么把grid数据展示出来，懂jquery的应该猜到了，前面使用的是$("#upTypeGrid").flexigrid();没错，就是往夜歌标签节点上绑上去就ok了，我这里定义一个table：

<table id="upTypeGrid"></table>

到此前台就写完了，这个时候可能你按照url里的在后台建了一个ajax方法，但是数据也查询了，也转为json了，但是呢就是不显示数据，因为你还缺少关键点。它对应的后台关键点就是json格式，实际上它需要专门的json格式数据对应的，这点官网跟demo里都说的很隐晦。

我这里按照它的这个格式建一个对外的VO类，如下：

public class FlexiGridPage {

private int page; /*当前页数*/

private long total; /*总记录条数*/

private List<?> rows; /*记录集合*/

public int getPage() {

return page;

}

public void setPage(int page) {

this.page =page;

}

public long getTotal() {

return total;

}

public void setTotal(long total) {

this.total = total;

}

public List<?> getRows() {

return rows;

}

public void setRows(List<?> rows) {

this.rows = rows;

}

}

我们的数据实际上只是里面的List，这个里面能不能扩展其他属性，扩展后是否可以取到还没有亲测，我认为扩展肯定是没有问题的，前台怎么取到估计得改改基础js，先出货了吧，后面对grid有高需求再来干它。

接下来应该知道了吧，没错就是把你的结果集设置到这个vo，然后对这个对象进行转json，其实它还支持xml的，今天没有亲测xml实现。

上json后台的硬货吧。

@RequestMapping("/dictionary/v_getTypeList.jspx")

public void getTypeList(String queryType,Integer contentId, HttpServletResponse response,HttpServletRequest request, ModelMap model) {

//获取前台设置的参数

String rp = request.getParameter("rp");

if(StringUtils.isBlank(rp)) {

rp = String.valueOf(CookieUtils.getPageSize(request));

}

String page = request.getParameter("page");

if(StringUtils.isBlank(page)) {

page = "1";

}

Pagination pagination = new Pagination();

List<CmsDictionary> ls = new ArrayList<>();

if(contentId != null) {

pagination = manager.getPage(queryType,Integer.parseInt(page),Integer.parseInt(rp),contentId);

}else {

pagination = manager.getPage(queryType,Integer.parseInt(page),Integer.parseInt(rp));

}

ls = (List<CmsDictionary>) pagination.getList();

ls.sort(Comparator.comparing(CmsDictionary::getParentId).thenComparing(CmsDictionary::getPriority));

//将数据转vo

FlexiGridPage gridPage = new FlexiGridPage();

gridPage.setPage(Integer.parseInt(page));

gridPage.setTotal(pagination.getTotalCount());

gridPage.setRows(ls);

//vo转json

JSON json = net.sf.json.JSONObject.fromObject(gridPage);

response.reset();

String reStr = json.toString();

//使用工具类往前台返回json数据，其实跟下面的写法作用一样

ResponseUtils.renderJson(response, reStr);

/*PrintWriter pw = null;

try {

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");

pw = response.getWriter();

pw.write(reStr);

pw.flush();

pw.close();

} catch (IOException e) {

//e.printStackTrace();

log.error("获取商品类型失败，异常:"+e.getCause().getMessage());

}*/

}

到此，flexigrid的使用前后台就串起来了。然后设置列的展示与现实只需要点击列上的小三角，你会发现神奇。

然后我在补充下序号的扩展，貌似这个也不支持序号显示的，这个扩展包括checkbox的扩展，其实都有2种思路：

1、改基础js支持

2、自定义事件

我暂时都是使用的第二种思路，言归正传，序号的扩展

这样扩展其实还有点小bug，就是grid下面的工具栏里的上翻页、刷新按钮的点击事件，数据没有问题，但是序号不能还原。说到这里就跟大家刘哥家庭作业吧，下面的按钮怎么隐藏？

flexigrid的相关知识补充:

介绍：Flexigrid它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

是一款易用、灵活的高性能表格控件，让用户创建友好界面，用于展示、变更、修改格式、组织、总结和打印各种数据。提供所有基础功能，以及更加灵活的高级功能，包括概要树、单元格合并、高级打印、快速变更格式、单元格自定义等。通过自定义功能，可以创建自己的单元格类，自定义表格的呈现和特性等。

参数介绍：

1、flexigrid参数说明:

height: 200, //flexigrid插件的高度，单位为px

width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题

striped: true, //是否显示斑纹效果，默认是奇偶交互的形式

novstripe: false,//没用过这个属性

minwidth: 30, //列的最小宽度

minheight: 80, //列的最小高度

resizable: false, //resizable table是否可伸缩

url: false, //ajax url,ajax方式对应的url地址

method: 'POST', // data sending method,数据发送方式

dataType: 'json', // type of data loaded,数据加载的类型，xml,json

errormsg: '发生错误', //错误提升信息

usepager: false, //是否分页

nowrap: true, //是否不换行

page: 1, //current page,默认当前页

total: 1, //total pages,总页面数

useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数

rp: 25, // results per page,每页默认的结果数

rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数

title: false, //是否包含标题

pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式

procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息

query: '', //搜索查询的条件

qtype: '', //搜索查询的类别

qop: "Eq", //搜索的操作符

nomsg: '没有符合条件的记录存在', //无结果的提示信息

minColToggle: 1, //允许显示的最小列数

showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。

hideOnSubmit: true, //是否在回调时显示遮盖

showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮

autoload: true, //自动加载，即第一次发起ajax请求

blockOpacity: 0.5, //透明度设置

onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用

onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序

onSuccess: false, //成功后执行

onSubmit: false, // 调用自定义的计算函数，基本没用

//Style

gridClass: "bbit-grid"//样式

}, p);

----------------------------------------------------------------------------------------------

2、支持ajax跨域：

url中加callback=?

后台获得callback函数的名字

返回json数据格式为:print(callbackName+"("+jsonString+")");

----------------------------------------------------------------------------------------------

3、Flexigrid(HUGO.CM修改版v1.1)使用说明:

1、加载flexigrid。p：选项参数集合

$(“”).flexigrid(p);

2、重新加载数据。

$(“”).flexReload(p);

3、更改flexigrid参数。P：选项参数集合

$(“”).flexOptions (p);

4、隐藏/显示列。cid：列索引，visible：bool

$(“”).flexToggleCol (cid, visible);

5、绑定数据。Data：数据源

$(“”).flexAddData (data);

6、no select plugin by me 。不知道做什么用的

$(“”).noSelect (p);

7、重新指定宽度和高度。

$(“”).flexResize(w,h);

8、翻页。type：first、prev、next、last、input

$(“”).changePage(type);

----------------------------------------------------------------------------------------------

4、Flexigrid——colModel:

属性名 类型 描述

display string 显示的列名

name string 绑定的列名

sortable bool 是否可以排序

align string 对其方式

width int 列的宽度

hide bool 是否隐藏该列

pk bool 是否为主键标识、如果是则隐藏该列，值存入隐藏域中

process function

customValue function 自定义显示值。(如性别：数据库为Bit类型，通过customValue方法返回“男/女”)参数：value,i

----------------------------------------------------------------------------------------------

5、Flexigrid——事件

事件名 参数 描述 返回值

onDragCol dcoln,dcolt 拖动列后触发 无

onToggleCol cid,visible 隐藏/显示列后触发 无

onChangeSort sortname,sortorder 自定义排序事件 无

onChangePage newp 自定义翻页事件 无

onSuccess 无 数据获取成功时触发 无

onError XMLHttpRequest,textStatus,errorThrown 出现错误时触发 无

onSubmit 无 在获取数据前时触发 bool

onRowSelect this 行选中事件 无

----------------------------------------------------------------------------------------------

6、Flexigrid——buttons

属性名 类型 描述

name string 按钮名称

bgclass string 样式

onpress function 点击触发的方法

separator bool 分割线

----------------------------------------------------------------------------------------------

7、Flexigrid——searchitems

属性名 类型 描述

display string 搜索类型下拉列表框：显示的列名

name string 搜索类型下拉列表框：绑定的列名

isdefault bool 是否为默认搜索类型

//注：如果searchitems：true，则自动根据所有字段生成下拉列表框

上面说的家庭作业其实就是粗鲁的将字段设置下的其他配置删除，只留下：

height:"auto",

width:"auto"

目前很多人数这个组件不好，其实我想说的是这个组件免费，而且易扩展，前端知识不是太差都可以打开浏览器的调试工具，结合基础js查明基本原理，然后就可以很轻松的自行扩展。

那么新的家庭作业又来了，那就是怎么每次刷新，重新加载数据（我遇到的问题就是只要第一次打开展现grid了，后面再打开，查询条件发生变化拼接到url上了，数据还是不刷新）？