<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(); }
- 浏览: 178022 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
ls0609:
语音实现在线听书http://blog.csdn.net/ls ...
ANDROID语音识别示例 -
AILIKES:
1927105 写道示例中219应该才是虚拟IP多谢指正,21 ...
虚拟IP原理 -
gaoke:
1927105 写道示例中219应该才是虚拟IP是的
虚拟IP原理 -
lubacui:
我居然看完了,貌似有些道理。
如何掌控自己的时间,并改变现状? -
1927105:
示例中219应该才是虚拟IP
虚拟IP原理
发表评论
-
JAVA CPU占用过高问题排查
2018-05-30 09:55 9221. 查找进程 top查看进 ... -
发布jar包到Maven中央仓库
2018-04-11 18:27 1154平时自己开发的工具类或者其他的框架的jar包一般都是放在本 ... -
自定义滚动条样式
2018-02-03 15:31 947/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ... -
关于javascript踩过的坑
2018-01-07 21:47 671前言: 最近做项目写JS时遇到一个 ... -
thrift
2015-05-17 00:08 767一、About thrift 二 ... -
使用新浪API获取短链接并生成二维码
2014-11-12 11:27 1448开发的时候遇到了这么一个问题,由于URL太长 ... -
Hessian 原理分析
2014-08-29 17:06 683一. 远程通讯协议的基本原理 网络通信需要做的就 ... -
html输入框输入限制
2014-07-25 10:22 1343JS判断只能是数字和小数点 1.文本框只能输入数字代码(小 ... -
JdbcTemplate学习笔记
2014-04-30 09:55 7701、使用JdbcTemplate的execute()方法执行 ... -
Git 指令集
2014-04-14 09:36 610it 是分散式的版本控制 ... -
Github的相关使用文章
2014-04-14 09:30 729Git介绍,安装,Git+Git flow使用:http:/ ... -
初识Github
2014-04-14 09:29 852Git是一个分布式的版本控制系统,最初由Linus Torv ... -
keepalived使用与安装
2014-04-10 10:42 1140官方网站 http://www.keepa ... -
MessageDigest使用 完成MD5加密
2014-04-09 10:16 1717Java 加密技术:消息摘要。 一个消息摘要就是一个数据块 ... -
Maven 手动添加 JAR 包到本地仓库
2014-04-08 16:48 603Maven 确确实实是个好东西,用来管理项目显得很方便,但是 ... -
通过GC输出分析内存泄露问题
2014-04-08 16:38 731文章原地址:http://cenwenchu.ja ... -
解决:Project facet Java version 1.7 is not supported.
2014-04-08 09:19 1053在移植eclipse项目时,如果遇到 “Project f ... -
Jquery-zTree的基本用法
2014-04-04 10:41 1423zTree 是利用 JQuer ... -
剖析top命令显示的VIRT RES SHR值
2014-04-02 17:15 18711 VIRT RES SHR的准确含义 ... -
Redis 集群规范
2014-04-02 17:06 717文档翻译自 http://redi ...
相关推荐
FlexiGrid 插件简单应用从英文版本改为简体中文版本
很简单的实例,可以参考参考. flexigrid删除实例
ASP.NET MVC Flexigrid代码还有NorthWind数据库
NULL 博文链接:https://johlon.iteye.com/blog/1039655
近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不过兄弟我可是不敢,原因很简单:太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大,实在是让我...
同时将其封装为dotNet控件,提供了简单易用的使用方式。 dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行...
今天比较空闲,所以花了点时间用flexigrid做了简单例子,基于PHP,可以直接在支持PHP的环境里实验效果。
基于jquery 实现的优秀grid组件,功能强大,使用上比flexigrid简单,包括完整的使用手册,新版支持json
同时将其封装为asp.net 控件,提供了简单易用的使用方式。 dotNetFlexGrid作为一个轻量级的表格控件,同时提供了大量实用和高效的功能: 控件本身是全异步的工作模式,表格数据的刷新无需重新刷新整个页面。提供了...
同时将其封装为asp.net 控件,提供了简单易用的使用方式。 dotNetFlexGrid作为一个轻量级的表格控件,同时提供了大量实用和高效的功能: 控件本身是全异步的工作模式,表格数据的刷新无需重新刷新整个页面。提供了...
日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到...
里面包含tree,table,form,flexigrid等几个基于jquery库的ui插件,功能齐全用法比较简单
虽然有很多javascript网格插件,例如ng-grid、jqgrid和flexigrid,但我也需要一个自己制作的网格插件。 原因之一,面对需求的频繁变化,我需要能够灵活修改网格插件。 另外一个原因,自己基于 angular.js 构建一个...
日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到客户端...