您的位置：首页 > 产品设计 > UI/UE

使用easyUI的combogrid来实现模糊查询,jsp部分

2014-03-03 19:48 483 查看

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
isELIgnored="false"%>

<%@include file="../taglibs.jsp"%>
<%@ page import="com.xwtech.frame.util.constant.RequestConstants"%>
<html>
<head>
<title>模糊查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${contextPath}/frame_res/js/jquery-easyui-1.2.5/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="${contextPath}/frame_res/js/jquery-easyui-1.2.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${contextPath}/frame_res/js/jquery-easyui-1.2.5/locale/easyui-lang-zh_ZH.js"></script>

<script>
/**
* 初始化参数
*/
var searchParam = {};

/**
* 获取商品查询 参数
*/
function getSearchParam(){
return searchParam;
}

/**
* 初始化
*/
$(function(){
//初始化新增明细grid
initAtomsGrid();
});

function initAtomsGrid()
{
var url = 'orderOverTime.do?method=queryAtoms';
$('#atomsTable').combogrid({
height:'auto',
idField:'atomsNum',
textField:'atomsName',
multiple:false,//多选按钮
pagination : true,//是否分页
mode : 'remote',//远程连接方式
fitColumns:true,//自动大小
queryParams:searchParam,//当请求远程数据时，发送的额外参数
method:'get',//请求方式
dataType:'json',
columns:[[
{field:'atomsNum',title:'原子编码',fitColumns:true},
{field:'atomsName',title:'原子商品名称',fitColumns:true}
]],
onChange:function(newVal , oldVal){
return false;
},
keyHandler:{
up: function(){},
down: function(){},
enter: function(){
getSearchParam();
searchParam.key = encodeURI(decodeURIComponent($.trim($('#atomsTable').combogrid('getText'))));
var grid =  $('#atomsTable').combogrid('grid');
$(grid).datagrid('options').url= url;
$(grid).datagrid('load');
},
query:function(q){
return false;
}
},
onSelect:function()
{
var grid=$("#atomsTable").combogrid("grid");//获取表格对象
var row = grid.datagrid('getSelected');//获取行数据
$('input[name=atomsNumOther]').val(row.atomsNum);
$('input[name=atomsNum]').val(row.atomsNum);
$('input[name=atomsName]').val(row.atomsName);
}
});
}

</script>
</head>
<body>
<div id="main_div" style="padding: 10px; overflow: auto;">
<!-- 展示区title -->
<div class="breadcrumb-iframe">
下单超时配置--操作
</div>
<!-- 模块当前位置结束 -->
<form name="editForm" id="editForm" action="" method="post">
<!-- 展示信息内容区域开始 -->
<table  class="tableStyle table2">
<tr>
<th>
原子商品：
</th>
<td>
<!-- 展示结果grid -->
<input type="text" id="atomsTable" name="atomsTable" class="easyui-combogrid" style="width: 440px;" />
<input type="hidden" name="atomsName" value = ''/>
                                                        <input type="hidden" name="atomsNum" value = ''/>

</tr>
</table>

</form>
</div>
</body>
</html>

新人刚入公司两个月，大多数时间接触的是后台的增删查改，开始接触easyUI框架，与大家分享我工作中遇到的问题和解决方法

如图，这是一个通过combogrid生成的数据表格

其jsp代码实现如图

单点击enter时，js会自动保存输入的值为key，这样就方便大家后台取值进行模糊查询

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyUi 模糊查询 combogrid

相关文章推荐

新的分享

章节导航