EasyUI中Combobox组件中关于JSON数据的展现
1.首先下载easyui所需要的js包，下载地址：
http://www.jeasyui.com/download/index.php
2.下载JSON-lib包，这个Java类包用于把bean,map和XML转换成JSON并能够把JSON转回成bean和
DynaBean
3.下载完所需要的js包和json-lib包后，直接来看例子。
展示数据 index.jsp
获取数据 getData.jsp：
获取级联数据的 getData1.jsp：
http://www.jeasyui.com/download/index.php
2.下载JSON-lib包，这个Java类包用于把bean,map和XML转换成JSON并能够把JSON转回成bean和
DynaBean
3.下载完所需要的js包和json-lib包后，直接来看例子。
展示数据 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String ctx = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.2/demo/demo.css">
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bb").combobox({
url:'getData.jsp',
valueField:'id',
textField:'text',
panelHeight:'auto'
});
});
</script>
</head>
<body>
第一种方法(jsp交互):
<input id="aa" class="easyui-combobox" name="aa"
data-options="valueField:'id',textField:'text',url:'getData.jsp'" panelHeight="auto" />
<br/> <br/>
第二种方法:
<input id="bb" class="easyui-combobox" name="bb" />
<br/> <br/>
级联:
<input id="cc" class="easyui-combobox" name="cc" data-options="valueField:'id',textField:'text',url:'getData.jsp',
onSelect:function(rec){var url = 'getData1.jsp?id='+rec.id ; $('#dd').combobox('reload',url)} "/>
<input id="dd" class="easyui-combobox" name="dd" />
<br><br>
第三种方法(Servlet交互):
<input id="ee" class="easyui-combobox" name="ee"
data-options="valueField:'id',textField:'text',url:'<%=ctx %>'+'JsonServlet'" panelHeight="auto" />
<br/> <br/>
</body>
</html>
获取数据 getData.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONArray,java.util.*" %>
<%
String s = "[{\"id\":1,\"text\":\"text1\"},{\"id\":2,\"text\":\"text2\"}]";
out.write(s);
String q = null ;
out.write(q);
%>
获取级联数据的 getData1.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONArray,java.util.*" %>
<%
String id = request.getParameter("id");
String data = null ;
if(id.equals("1")){
data = "[{\"id\":11,\"text\":\"text11\"}]";
}else{
data = "[{\"id\":21,\"text\":\"text21\"}]";
}
out.println(data);
%>
import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
* Servlet implementation class JsonServlet
*/
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsonServlet() {
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
TextBean tb = new TextBean();
tb.setId(1);
tb.setText("java");
TextBean tb2 = new TextBean();
tb2.setId(2);
tb2.setText("python");
TextBean tb3 = new TextBean();
tb3.setId(3);
tb3.setText("javascript");
List<TextBean> list = new ArrayList<TextBean>();
list.add(tb);list.add(tb2);list.add(tb3);
JSONArray jsonArray = JSONArray.fromObject(list);
response.setContentType("text/html;charset=UTF-8");
Writer writer = response.getWriter();
writer.write(jsonArray.toString());
}
}
public class TextBean {
private int id ;
private String text;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}