flexgrid的应用
第一、导入必须的CSS与JS:
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
在此还可以按钮的样式:
<style>
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.flexigrid div.fbutton .add
{
background: url(css/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete
{
background: url(css/images/close.png) no-repeat center left;
}
</style>
第二、用flexgrid定义一个grid(表格数据可以采用AJAX来异步填充):
<form id="sform">
<p>
Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
Value 3 :
<select name="val3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select><br />
Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
</p>
<p>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</p>
</form>
<table id="flex1" style="display:none"></table>
<script type="text/javascript">
$("#flex1").flexigrid
(
{
url: 'post3.do',//提交服务器端处理的URL
dataType: 'json',//定义数据交换格式
colModel : [ //定义表格列名、宽度、是否居中
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
searchitems : [//定义搜索列表(以下拉列表的形式表现)
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",//排序列名
sortorder: "asc",//定义为升序
usepager: true,//是否分页
title: 'Countries',//GRID的名称
useRp: true,//启用分页大小器
rp: 15,//每页大小
showTableToggleBtn: true,//是否显示右上角缩小视窗的按钮
width: 700,//grid宽度
onSubmit: addFormData,//数据传出时调用的函数
height: 200过//grid高度
}
);
function addFormData()
{
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});
return true;
}
$('#sform').submit
(
function ()
{
$('#flex1').flexOptions({newp: 1}).flexReload();
return false;
}
);
</script>
第三、服务器端处理程序:
StringBuffer jsonStr = new StringBuffer();
jsonStr.append("{\r\n");
jsonStr.append("page:").append(pageString).append(",\r\n");
jsonStr.append("total:").append(hpage.getTotalRows()).append(",\r\n");
jsonStr.append("rows:[\r\n");
for (Iterator it = list.iterator(); it.hasNext();) {
YwSalesmain salesmain = (YwSalesmain) it.next();
jsonStr.append(" {id:'").append(salesmain.getSalesid()).append(
"',").append("cell:[");
jsonStr.append("'" + salesmain.getSalesid() + "',");//
jsonStr.append("'" + nullProcess(salesmain.getPoser()) + "',");//
jsonStr.append("'" + nullProcess(salesmain.getPosid()) + "',");//
jsonStr.append("'" + salesmain.getNetamount() + "',");//
jsonStr.append("'" + nullProcess(salesmain.getMrsaleprice()) + "',");//
jsonStr.append("'" + salesmain.getAmount() + "'");//
if (keynum < list.size()) {
jsonStr.append("]},\r\n");
} else {
jsonStr.append("]}\r\n");
}
keynum++;
}
jsonStr.append(" ]\r\n}");
PrintWriter out = response.getWriter();
out.println(jsonStr.toString());
out.flush();
out.close();
最新文章
- mono ios莫名其妙闪退的解决方法
- 让Fiddler 直接抓取java程序的方法
- 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox
- JS中this的值到底为何?
- 【我是老中医】VMware在win8.1下开Ubuntu提示”内部错误";解决方案
- [转]理解JavaScript中的事件处理
- MS SQL Server之光标、存储过程和触发器
- 51nod1354 选数字
- crontab读取环境变量方法
- mysql优化21条
- 导致Asp.Net站点重启的10个原因
- JS脚本显示当前日期+星期几[转]
- java BigInteger源码学习
- ActionResult的其它返回值
- linux下ssh通过公钥登录服务器
- static在类中的功能
- input框下拉综合搜索
- eclipse中中文注释乱码怎么解决
- assistant文档
- 前端模板学习bootstrap
热门文章
- Jfinal连接自助数据库的数据源
- 类找不到异常 Caused by: java.lang.NoClassDefFoundError
- Http状态码301和302概念简单区别
- CCS float vs clear
- This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms
- HackerRank ";Permutation game";
- MySQL存储引擎MyISAM与InnoDB的优劣
- Cacti不显示图片(nan)
- docker的例子
- tarjan算法 POJ3177-Redundant Paths