FlexGrid动态传参的做法

 

思路:通过ajax动态传JSON方式。回调FlexGrid的flexReload方式实现。

 

js:

$("#flexTable").flexigrid({
			width: 700 ,
			height: 150,
			url: 'workform-function-main!getWbfDetailGridSummaryDate.action',
			dataType: 'json',
			colModel : [
			        	{display: '序号', name : 'id', width : 50, sortable : true, align: 'center',hide: true,toggle : false},
			        	{display: '工单编码', name : 'workformid', width : 80, sortable : true, align: 'center'},
			        	{display: '节点编号', name : 'nodeid', width : 80, sortable : true, align: 'center'},
			        	{display: '出单点名称', name : 'orderorg', width : 80, sortable : true, align: 'center'},
			        	{display: '分配给', name : 'distribute', width : 80, sortable : true, align: 'center'},
			        	{display: '节点状态', name : 'nodestate', width : 80, sortable : true, align: 'center'},
			        	{display: '节点名称', name : 'nodename', width : 250, sortable : true, align: 'center'}
				],
			errormsg: '发生异常',
			sortname: "id",
			sortorder: "desc",
			usepager: false,
			useRp: false,
			nomsg: '没有符合条件的记录存在',
			minColToggle: 1, //允许显示的最小列数
			showTableToggleBtn: true,
			autoload: true, //自动加载,即第一次发起ajax请求
			resizable: true, //table是否可伸缩
			procmsg: '加载中, 请稍等 ...',
			hideOnSubmit: true, //是否在回调时显示遮盖
			showcheckbox: false,//是否显示第一列的checkbox(用于全选)
			gridClass: "bbit-grid",//样式
			rowbinddata: true,//配合上一个操作,如在双击事件中获取该行的数据
			striped:false,
			blockOpacity: 0.5//透明度设置
		});

 

 

	function gridFlash(){
		 var params = {'username':$("#username").val()};   
	    $.post(   
	            "workform-main!getData.action",   
	            params,   
	            function(){
	            	$("#flexTable").flexReload();
	            }   
	        ); 
	 }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Flexigrid</title> <link rel="stylesheet" type="text/css" href="css/flexigrid.css" /> <script type="text/javascript" src="jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="flexigrid.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#flex1").flexigrid ( { url: 'post2.php?table=country&len=3', dataType: 'json', colModel : [ {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'}, {display: '邮箱可见', name : 'email_disable', width : 45, sortable : true, align: 'left',hide:'true'}, {display: '邮箱地址', name : 'email', width : 100, sortable : true, align: 'left'}, {display: '邮箱验证', name : 'email_verify', width : 45, sortable : true, align: 'left',hide:'true'}, {display: '密码', name : 'pwd', width : 140, sortable : true, align: 'center',hide:'true'}, {display: '真实密码', name : 'pwd', width : 140, sortable : true, align: 'center',hide:'true'}, {display: '密码保护问题', name : 'pwd_question', width : 140, sortable : true, align: 'center'}, {display: '密码保护答案', name : 'pwd_answer', width : 140, sortable : true, align: 'center'}, {display: '手机', name : 'mobile', width : 100, sortable : true, align: 'center'}, {display: '手机验证', name : 'mobile_verify', width : 45, sortable : true, align: 'center',hide:'true'}, {display: '真实姓名', name : 'realname', width : 45, sortable : true, align: 'center'}, {display: '性别', name : 'gender', width : 40, sortable : true, align: 'center'}, {display: '身份证号', name : 'idcard', width : 110, sortable : true, align: 'center'}, {display: '身份证图片', name : 'idcard_image', width : 100, sortable : true, align: 'center',hide:'true'}, {display: '是否成年', name : 'adult', width : 40, sortable : true, align: 'center',hide:'true'}, {display: 'point', name : 'point', width : 40, sortable : true, align: 'center',hide:'true'}, {display: '注册时间', name : 'reg_time', width : 100, sortable : true, align: 'center',hide:'true'}, {display: '注册地址', name : 'reg_ip', width : 100, sortable : true, align: 'center',hide:'true'}, ], searchitems : [ {display: 'ID', name : 'id'}, {display: 'email', name : 'email',isdefault: true}, {display: 'gender', name : 'gender'} ], sortname: "id", sortorder: "asc", usepager: true, title: '帐号信息', useRp: true, rp: 2, showTableToggleBtn: true, width: 811, height: 500 } ); }); function sortAlpha(com) { jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]}); jQuery("#flex1").flexReload(); } function test(com,grid) { if (com=='Delete') { if($('.trSelected',grid).length>0){ if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){ var items = $('.trSelected',grid); var itemlist =''; for(i=0;i<items.length;i++){ itemlist+= items[i].id.substr(3)+","; } $.ajax({ type: "POST", dataType: "json", url: "delete.php", data: "items="+itemlist, success: function(data){ alert("Query: "+data.query+" - Total affected rows: "+data.total); $("#flex1").flexReload(); } }); } } else { return false; } } else if (com=='Add') { alert('Add New Item Action'); } } </script> </head> <body> <table id="flex1" style="display:none"></table> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值