EasyUI 通过单选框筛选combogrid数据

最新推荐文章于 2025-04-30 08:00:00 发布

最新推荐文章于 2025-04-30 08:00:00 发布 · 532 阅读

文章标签：

#easyui #combogrid

UI&插件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JS代码和JSP页面实现一个基于项目类型的收费项目下拉列表功能，包括事件触发、数据加载及展示。

JS代码:

$(function(){

*  //项目类型        */
	$('#all').click(function(){
		$('#tollItem').combogrid({url:NTax.webPath + 'report/report!getTollItem?parentid='+10001});
	});
	$('#famo').click(function(){
		$('#tollItem').combogrid({url:NTax.webPath + 'report/report!getTollItem?parentid='+1000102});
	});
	$('#shoufei').click(function(){
		$('#tollItem').combogrid({url:NTax.webPath + 'report/report!getTollItem?parentid='+1000101});
	});

/* 
 * 收费项目下拉列表  */
	$('#tollItem').combogrid({
		panelWidth:440,   
        striped: true,   
        rownumbers:true,//序号   
        collapsible:false,//是否可折叠的   
        fit: true,//自动大小   
        pagination:true, 				//启用分页控件
        method:'post',   
		pageSize:NTax.pageSize,			//每页显示的记录条数，默认为50
	    pageList:NTax.pageList, 		//可以设置每页记录条数的列表
		loadMsg: '正在加载数据...', 			//当从远程站点加载数据时，显示的提示信息。
		idField:'itemid',
		textField:'itemname',
		url:NTax.webPath + 'report/report!getTollItem?parentid='+10001,
		columns:[[
			{field:'itemid',title:'项目编号',width:120},
			{field:'itemname',title:'项目名称',width:280}
		]]
	});
});

jsp页面：

<tr height=30>
				<td align="right" style="margin-right:10px;" height=30>项目类型：</td>
				<td>
					<input id="all" type="radio" name="itemclass" value="10001" checked="checked"/>全部&nbsp;&nbsp;&nbsp;
					<input id="famo" type="radio" name="itemclass" value="1000102"/>罚没&nbsp;&nbsp;&nbsp;
					<input id="shoufei" type="radio" name="itemclass" value="1000101"/>收费
				</td>
			</tr>
			<tr height=30>
				<td align="right" style="margin-right:10px;" height=30>收费项目：</td>
				<td>
					<select id="tollItem" name="tollItem" style="width:270px;">
						
					</select>
				</td>
			</tr>