`
longflang
  • 浏览: 65958 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery filexgrid动态列

 
阅读更多

思路:根据相关参数,动态的成对应该的参数列。设置到Flexgrid参数中。

js对应该的方法:

function roleselect(){
    $.ajax({ 
    	url:'workform-main!getColumBySpcode.action?opttype=' +$('#opttype').val(),//请求列信息的地址 
    	dataType:'json', 
    	success:function(data){ 
	    	var json = eval(data);
	    	// op为包含列信息的数组
	    	var op=new Array(); 
	    	// 迭代返回数据 读出读出每个列信息拼装成对象填入数组
	    	$.each(json, function(i,item){
	    		if(i==0){
	    			op.push({display: item.display, name : item.name, width : 50, sortable : true, align: 'center',hide: true,toggle : false});
	    		}else if(i==1){
	    			op.push({display: item.display, name : item.name, width : 80, sortable : true, align: 'center',process:clickrow}); 
	    		}else{
	    			op.push({display: item.display, name : item.name, width : 120, sortable : true, align: 'left'});
	    		} 
	    	}); 
	    	// 重画grid
	    	var w = $("#ptable").width() - 3;
			grid=$("#flexTable").flexigrid({
				width: w ,
				height: 250,
				url: 'workform-main!getData.action?type=' + $('#type').val() ,
				dataType: 'json',
				colModel : op,
				searchitems : [
					{display: '客户编码', name : 'customerid', isdefault: true},
					{display: '客户名称', name : 'customername',operater: "Like"},
					{display: '工单类型', name : 'wftype',operater: "Like"},
					{display: '工单状态', name : 'wfstate',operater: "Like"}
					],
				errormsg: '发生异常',
				sortname: "id",
				sortorder: "desc",
				//qop: "Eq",//搜索的操作符
				usepager: true,
				//title: '详细信息列表',
				//pagestat: '显示记录从{from}到{to},总数 {total} 条',
				useRp: false,
				rp: 10000,
				//rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
				nomsg: '没有符合条件的记录存在',
				minColToggle: 1, //允许显示的最小列数
				showTableToggleBtn: true,
				autoload: true, //自动加载,即第一次发起ajax请求
				resizable: true, //table是否可伸缩
				procmsg: '加载中, 请稍等 ...',
				hideOnSubmit: true, //是否在回调时显示遮盖
				showcheckbox: true,//是否显示第一列的checkbox(用于全选)
				gridClass: "bbit-grid",//样式
			    rowhandler: contextmenu,//是否启用行的扩展事情功能,在生成行时绑定事件,如双击,右键菜单等
				rowbinddata: true,//配合上一个操作,如在双击事件中获取该行的数据
				onrowchecked: callme,//在每一行的的checkbox选中状态发生变化时触发某个事件
				//onrowchecked: false//在每一行的的checkbox选中状态发生变化时触发某个事件
				
				striped:false,
				blockOpacity: 0.5//透明度设置
			});
    	}	
    });
}

 

java Action 代码:

public String getColumBySpcode() {
		setActionInfo();
		String opttype = this.getRequest().getParameter("opttype");
		JSONArray array = new JSONArray();
		if ("runtype".equals(opttype)) {
			array.put(new JSONObject(new FlexGridColumnVo("编号","id")));
			array.put(new JSONObject(new FlexGridColumnVo("客户编码","customerid")));
			array.put(new JSONObject(new FlexGridColumnVo("电话号码","photono")));
			array.put(new JSONObject(new FlexGridColumnVo("客户名称","customername")));
					}else{
			array.put(new JSONObject(new FlexGridColumnVo("编号","id")));
			array.put(new JSONObject(new FlexGridColumnVo("客户编码","customerid")));
			array.put(new JSONObject(new FlexGridColumnVo("电话号码","photono")));
			array.put(new JSONObject(new FlexGridColumnVo("客户名称","customername")));
						array.put(new JSONObject(new FlexGridColumnVo("客户级别","lever")));
			array.put(new JSONObject(new FlexGridColumnVo("基本商品","basepro")));
			array.put(new JSONObject(new FlexGridColumnVo("CMIP","cmip")));
			array.put(new JSONObject(new FlexGridColumnVo("是否已回填","fullback")));
		}
	
		JSON_OBJECT = array.toString();
		return setJsonObject();
	}

 

	private void setActionInfo() {
		this.getResponse().setContentType("text/html");
		this.getResponse().setCharacterEncoding("utf-8");
		this.getResponse().setHeader("Pragma", "no-cache");
		this.getResponse().setHeader("Cache-Control", "no-cache, must-revalidate");
		this.getResponse().setHeader("Pragma", "no-cache");
	}

 

	private String setJsonObject() {
		try {
			HttpServletRequest request = this.getRequest();
			System.out.println(request.getParameter("username"));
			this.getResponse().getWriter().write(JSON_OBJECT);
			this.getResponse().getWriter().flush();
			this.getResponse().getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

 

分享到:
评论

相关推荐

    jquery 排序, jquery 动态修改列

    本文将深入探讨“jQuery排序”和“jQuery动态修改列”这两个主题,结合给定的“ajax_commit.js”文件名,我们也将探讨jQuery如何与Ajax交互。 首先,让我们了解jQuery的排序功能。在网页开发中,对表格数据或者列表...

    jquery实现动态添加列,删除指定列

    jquery脚本实现动态添加列,删除指定列

    Jquery动态列

    **jQuery 动态列详解** 在网页开发中,jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作、事件处理、动画效果等任务。在数据展示时,动态列是提高用户交互体验的一种常见需求,比如表格数据可以根据...

    jquery锁定行锁定列

    "jquery锁定行锁定列"这个主题就是关于如何在jQuery中实现表格的冻结或锁定功能,以便用户在滚动页面时,特定的行或列始终保持可见,提升数据浏览体验。 首先,我们来理解一下“冻结行”和“锁定列”的概念。冻结行...

    jQuery设置表格列字段筛选改变代码

    本文将深入探讨如何使用jQuery来实现表格列字段的筛选功能,并且会在改变筛选条件时实时更新表格内容。 首先,让我们理解HTML结构。在`index.html`文件中,通常会有一个表格(`<table>`)元素,包含表头(`<thead>`...

    jQuery下拉多列插件

    《jQuery下拉多列插件深度解析与应用实践》 在网页开发中,下拉菜单是一种常见的交互元素,用于提供用户选择的多种选项。然而,传统的HTML `<select>` 元素仅支持单列显示,当选项过多时,用户体验往往不佳。为了...

    jquery表头固定、列固定完美解决方案

    为了解决这个问题,"jquery表头固定、列固定完美解决方案"应运而生。这个方案结合了jQuery库和自定义的JavaScript插件,旨在确保用户在滚动页面时,表头和选定的列始终可见。 jQuery是一个轻量级的JavaScript库,它...

    Jquery动态列功能完整实例

    本文实例讲述了Jquery动态列功能。分享给大家供大家参考,具体如下: 看到有人写的一个JQUERY动态列, 值得参考, 特转发下来 <!DOCTYPE html> <html> <head> <meta ...

    jQuery Datatables 动态列+跨列合并实现代码

    在本教程中,我们将探讨如何在jQuery DataTables中实现动态列和跨列合并。 动态列是指表格列的数量可以根据数据或者用户需求进行动态调整。在给出的代码示例中,动态列的实现主要依赖于`thead_key`和`thead_num`两...

    jquery iframe动态添加删除tab选项卡

    jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...

    jQuery实现动态更改table表格数据

    本教程将深入探讨如何使用jQuery实现动态更改table表格数据,让你的网页表格具有实时编辑功能,提升用户体验。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始,包含若干个`<tr>`(行)...

    jquery实现动态生成表格

    数据展示时候,经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小,通过jquery的html()和append()方法动态生成html表格的实例。

    jquery实现动态背景效果.rar

    本资源“jquery实现动态背景效果.rar”显然聚焦于利用jQuery来创建吸引人的动态背景特效,这对于提升网页用户体验至关重要。下面将详细探讨jQuery如何实现动态背景效果以及与C#的关联。 首先,jQuery提供了丰富的...

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。

    JQuery table改变列的宽度

    本文将深入探讨如何使用jQuery来改变表格(table)中的列宽,这在构建动态用户界面时非常实用。 首先,让我们理解HTML表格的基本结构。一个表格由`<table>`元素开始,包含若干行`<tr>`(table row),每一行又包含...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章,我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法,同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先,我们需要注意的是,当页面加载完毕后,jQuery的$(document)....

    jquery实现动态背景效果

    在本文中,我们将深入探讨如何使用jQuery库来创建动态背景效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,从而让网页开发变得更加高效。对于想要为网站增添...

    jquery动态添加删除(tr/td)

    - 标签中提到的“jquery 添加删除 tr td”说明了文档主要讲述的内容,即使用jQuery对表格中的行和列进行动态的添加和删除操作。 - 描述中提到“需要的朋友可以参考下”,说明该文档是面向需要进行相关操作的开发者...

    JQuery实战100列

    11. **表单处理**: 使用jQuery可以方便地验证表单数据,动态添加或删除表单元素,以及实现异步提交。 12. **响应式设计**: 结合CSS3和jQuery,可以创建响应式布局,实现不同设备和屏幕尺寸下的优化显示。 13. **...

Global site tag (gtag.js) - Google Analytics