flexigrid控件是一种较于ext来说轻量级的但却比较实用的实用于表格的全面强化,也是一种强大的表格表现形式。
$(function() {
$("#flex").flexigrid({
url : ‘',
dataType : 'json',
colModel : [{
display : '编号',
name : 'truck_no',
width : 100,// 得加上 要不IE报错
sortable : true,
align : 'center'
],
buttons : [
{name :'选定',bclass:'delete',onpress:action},
{separator : true}
],
searchitems : [{
display : '车辆编号',
name : 'truck_no',
isdefault : true
}, {
display : '车辆状态',
name : 'status'
}],
sortname : "默认排序依据",
sortorder : "排序方式有asc/desc",
usepager : true//是否实用分页,
title : '',
useRp : true,
minColToggle: 1, //允许显示的最小列数
autoload: true, //自动加载,即第一次发起ajax请求
resizable: false, //table是否可伸缩
procmsg: '加载中, 请稍等 ...'缓冲时信息,
onSubmit: addFormData//提交查询时调用的函数,
checkbox : true,// 是否要多选框
rowId : ',// 多选框绑定行的id
rp : 10//每页显示的数量,
page:1//当前页数,
nomsg: '没有符合条件的记录存在!',
showTableToggleBtn : true是否允许显示隐藏列,该属性有bug设置成false点击头脚本报错,
width : 1000,
height : 300
});//}
- var actions="";
function action(com, grid) {
switch (com) {
case '添加' :
openDig("/truckAdd.jsp",0,'821','176',refreshFlex2);
break;
case '修改' :
selected_count = $('.trSelected', grid).length;
if (selected_count == 0) {
tips.info("至少选择一条记录!");
return;
}
if (selected_count > 1) {
tips.info("最多选择一条记录!");
return;
}
data = new Array();
$('.trSelected td', grid).each(function(i) {
data[i] = $(this).children('div').text();
});
openDig("/'');
break;
}
openDig("/Mips/mips/dhl/repair_turnrepair.action?truckNo="+data[0],0,'821','176',refreshFlex2);
break;
case '维修完成' :
selected_count = $('.trSelected', grid).length;
if (selected_count == 0) {
tips.info("至少选择一条记录!");
return;
}
if (selected_count > 1) {
tips.info("最多选择一条记录!");
return;
}//第一种取值方式
data = new Array();
$('.trSelected td', grid).each(function(i) {
data[i] = $(this).children('div').text();
});
if("维修中"!=data[6]){
tips.info("该车辆尚未维修!");
return;
}
openDig("/Mips/mips/dhl/repair_turnrepair.action?truckNo="+data[0],0,'821','199','');
break;
case '删除' :
selected_count = $('.trSelected', grid).length;
if (selected_count == 0) {
tips.info("至少选择一条记录!");
return;
}
names = '';
$('.trSelected td:nth-child(2) div', grid).each(function(i) {
if (i)
names += ',';
names += $(this).text();
});
ids = '';
$('.trSelected td:nth-child(8) div', grid).each(function(i) {
if (i)
ids += ',';
ids += $(this).text();
});
if("空闲"!=ids){
tips.info("该车辆暂不能删除!");
retrun;
}
if (confirm("确定删除车辆[" + names + "]?")) {
openDig("/Mips/mips/dhl/all_delete.action?truckNo="+names,0,'360','155','');
}
break;
}
}
该方法提交之后,转交后台执行sql查询,查询成功后在相应的jsp页面进行显示。每列的表单值也可以设置是否可以排序、行的是否可选,是一种很便捷的工具,给开发人员很大程度上提高了效率也节省了时间降低了开发周期。