使用easyUI更改easyui-datagrid中url的解决方法以及解决乱码问题

先附上前端easyUI easyui-datagrid中代码

<table id="dg" title="选课信息" class="easyui-datagrid" fitColumns="true"
	 pagination="true" url="stuServlet?method=getStuList" fit="true" toolbar="#tb">
		<thead>
			<tr>
				<th field="cb" checkbox="true"></th>
				<th field="id" width="50">学生编号</th>
				<th field="name" width="100">学生姓名</th>
				<th field="birString" width="250">birthday</th>
				<th field="gname" width="100">班级名称</th>
				<th field="count" width="100">已选课数</th>
				<th field="cptime" width="100">所选课时</th>
			</tr>
		</thead>
	</table>

以上代码可在页面上展现出选课列表

但是如果我们需要添加模糊功能，那么就需要更改url地址来显示模糊列表

代码如下

<div> 学生姓名： <input type="text" name="stuName" id="stuName"><button onClick="searchStu()" id="search" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</button></div>

js代码如下

function searchStu(){
		$('#search').bind('click', function(){    
			var str=$("#stuName").val();
			$('#dg').datagrid("options").url = 'stuServlet?method=mohu&stuName='+encodeURI(encodeURI(str));
			$('#dg').datagrid('load');
               });
	}

首先由于这里是使用url方式直接传给后端（相当于是get方法，还有一种是post会自动编码）因此需要将要查询的参数携带到url中这样后端才能拿到这个数据到数据库中进行模糊查询

但是这里传递的是中文的话就会出现乱码问题，因此需要先将中文在前端页面上解析就需要用到encodeURI(encodeURI(str))进行两次编码两次是为了使浏览器不进行编码，然后后台在request.getParameter进行一次解码就能获取到中文数据，而如果前台只进行一次编码的话，那么浏览器会对其进行一次解码后台request.getParameter也会进行一次解码则还是会乱码

servlet代码如下

String stuName = request.getParameter("stuName");
		stuName=URLDecoder.decode(stuName,"utf-8");

这样这里拿到的stuName即为填入的中文

注意还要写上

if(stuName!=null&&stuName.length()>0) {
			mohuList= studentService.mohuList(stuName);
			
			String string = JSON.toJSONString(mohuList);
			response.getWriter().write(string);
		}

因为datagrid需要的是json字符串！

最后想说的是最好使用动态拼接页面列表比较方便，不要把页面写死就！！！

使用easyUI更改easyui-datagrid中url的解决方法以及解决乱码问题

猜你喜欢