<html>中有<tableid="flexi1"></table>
<script>中代码:
$("#flex1").flexigrid({
width: w,
height: h,
method:'Post', //或者'get'
url: 'FlexiGridServlet.do', //返回数据源的后台处理程序地址,也可以是xml文件的地址
dataType: 'json', //数据源类型,可谓 xml 和 json
colModel : [ //要显示的列,这里定义了数据表的l列
{display: '编号', name : 'ID', width : 50, sortable : true, align:'center',hide: false},
{display: '工作名称', name : 'JOB_NAME', width : 250, sortable : false, align:'center'},
{display: '工作地址', name : 'WORK_ADDRESS', width : 100, sortable : true, align:'center'},
],
buttons : [ //需要的操作按钮
{name: '添加', bclass: 'add', onpress : toolbar},
{name: '删除', bclass: 'delete', onpress : toolbar},
{name: '修改', bclass: 'modify', onpress : toolbar},
{separator: true}
],
searchitems : [ //可使用的查询条件
{display: '编号', name : 'ID', isdefault: true},
{display: '工作名称', name : 'JOB_NAME'},
{display: '工作地址', name : 'WORK_ADDRESS'},
{display: '语言', name : 'LANGUAGE'}
],
errormsg: '发生异常',
title: '信息发布管理',
pagestat: '显示记录从{from}到{to},总数 {total} 条',
//。。。。还有其他可以设置的属,及colModel、button属性见 http://blog.csdn.net/windxxf/article/details/7287997
});
后台:
response.setContentType("text/xml");
//response.setheader("Content-type: text/x-json"); //数据源为json时
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String xml="";
//String JSON="";
//这里动态获取XML或json格式的字符串(格式如下)
response.getWriter().write(xml); //返回XML数据源
//response.getWriter().write(JSON);
response.getWriter().flush();
response.getWriter().close();
xml数据源格式:
String xml="<?xml version="1.0" encoding="UTF-8"?>
< rows>
< page>1</page><total>2</total> //绿色为要显示的数据页和数据总量,及数据,可循环用相应变量代替
<row id=1>
< cell><![CDATA[111]]></cell><cell><![CDATA[1]]></cell><row>
< row id=2>
< cell><![CDATA[2222]]></cell><cell><![CDATA[1]]></cell><row></rows>"
JSON数据源格式:
String json =" {\n page: 1,\n total: 7,\n rows: [\n{id:'1',cell:['yy','rrr','uu']},id:'2',cell:['yy','rrr','uu']} ]} "
一般的json:
{ "people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
]}
动态改变flexigrid属性:
var option={
method : 'POST',
url : "/toolManagement1/servlet/ToolEditServlet",
datatype : "xml",
colModel : [{
display : '刀具编码',
name : 'tModelCode',
width : 50,
sortable : true,
align : 'center',
hide : false
} ],
errormsg : '发生异常',
.......
query : '',//搜索查询的tiaojian
qtype : '',//搜索查询的类别
procmsg : '加载中, 请稍等 ...',
hideOnSubmit : true, //是否在回调时显示遮盖
blockOpacity : 0.8,//透明度设置
rowbinddata : true,
showcheckbox : true
};
$(document).ready(function() {
$("#zhquery").click(function() {
option.url="/toolManagement1/servlet/ToolEditServlet?toolmodelcode="+"111";
option.newp = 1;
$("#queryresult").flexigrid(option);
$("#queryresult").flexOptions(option).flexReload(); }
flexigrid简单使用
最新推荐文章于 2024-03-30 02:56:37 发布