当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

flexigrid简单使用

发表于: 2014-04-24   作者:AILIKES   来源:转载   浏览次数:
摘要: <html>中有<tableid="flexi1"></table><script>中代码: $("#flex1").flexigrid({ width: w, height: h, method:'Post', //或者'get' url: 'FlexiGridServlet.do', //返回数据源的后台处

<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简单使用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
引用:http://www.iteye.com/topic/414611 首先.去下载FlexGrid http://www.flexigrid.info/ 下载完
以前我们做了一个管理项目,有一个很强大的插件FlexGrid,通过JS代码从后台获取数据,并显示一定的
最近把datatables熟悉了下,做了个小的demo,后来想下,以后要是用到类似的grid的时候,为什么不做
以前我们做了一个管理项目,有一个很强大的插件FlexGrid,通过JS代码从后台获取数据,并显示一定的
一、参考资料 1、jQuery插件flexiGrid的完全使用,附代码下载 2、修改flexigrid源码一(json,checkbo
今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉。于是乎,下面的博客诞生了 ^-^。   我
一、参考资料 1、jQuery插件flexiGrid的完全使用,附代码下载 2、修改flexigrid源码一(json,checkbo
经过对FlexiGrid的大量使用,及时不时琢磨下其代码,对她的脾性有了一定的了解,是该做总结的时候了
经过对FlexiGrid的大量使用,及时不时琢磨下其代码,对她的脾性有了一定的了解,是该做总结的时候了
近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号