easyui+ajax获取同表关联的数据

easyui是我们常用的前端框架之一，easyui的使用使得前端页面更加美观。为了能够使用combobox，ajax必须同步。

该小程序是使用ssm框架，对数据库的数据进行查询，所以url对应着mapper文件的SQL语句。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>编辑区域</title>
</head>
<body>
<form id="ff" method="post">
<div class="forms clearfloat">
    <div class="title">
        <div class="title-left">
            <span class="title-icon title-icon-file" ></span>
            <span class="title-hit title-collapsed"></span>
            <span class="channelname">基本信息</span>
        </div>
    </div>
   	<table class="edittab">
   		<tr>
   			<td class="td0">
   				<span>名称:</span>
   				<input name="basicProcedureId" type="hidden"/>
   			</td>
   			<td>
   				<input name="procedureName"  class="easyui-textbox easyui-validatebox" data-options="required:true,validType:'length[0,20]'"/>
   			</td>
   		</tr>
       　　　　<tr>
           　　　　<td class="td0"> <span>父工序:</span>
           　　　　</td>
          　　　　 <td>
<!--select下拉框-->
           　　　　<select id="procedureParent" name="procedureParent" class="easyui-combobox" style="width:90%" ></select>
           　　　　</td>
      　　 </tr>
   </table>
</div>
<div style="text-align:center;">
	<a href="javascript:Module.saveForm()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
	<a href="javascript:Module.resetForm()" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a>
	<a href="javascript:Module.clearForm()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a>
</div>
</form>
<script type="text/javascript">//页面打开就加载
$(function(){
	$.ajax({
		type : "get",
	    　　url : "/comm/query/DhBaseProcdureManageMapper/queryProcessList", //mapper文件中写的SQL语句
	    　　contentType : "application/json; charset=utf-8",
	    　　dataType : 'json',
	    　　async: false,//必须同步加载，异步出错
	    　　success : function(data) {
	    	var optionstring = "<option></option>";//第一个值为默认值空
	    	for (var i=0;i<data.length;i++) {//循环语句也能写成：var i in data
　　　　　　　　　　　//循环组成option标签，加转义符是为了使得id有引号
　　　　　　　　　optionstring += "<option value=\""+data[i].basicProcedureId+"\">" + data[i].procedureName + "</option>"; }
　　　　　　　　　$("#procedureParent").append(optionstring);//append进去
　　　　　　},
　　　　});
 });
</script>
 </body>
</html>

　　在如上的ajax中，下拉框显示的是名字，但是在数据库中存取的id。url对应mapper文件。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mapper.dhBaseProcdureManageMapper">
	<!--查询所有工序表 -->
	<select id="queryProcessList" parameterType="hashmap" resultType="hashmap">
	select d.basic_procedure_id,d.procedure_table_name,d.procedure_name,
   		d.procedure_type,d.procedure_code,d.unify_task_id,d.bsflag,d.create_user,
   		d.update_user,d.create_date,d.update_date,d.remark,d.procedure_table_pk,
		db.procedure_name  procedure_parent
    from dh_base_procdure_manage d
    	left join dh_base_procdure_manage db
    on d.procedure_parent = db.basic_procedure_id
    where d.bsflag='0'

	</select>
</mapper>

　　注意sql中别名的使用。

这里稍微拓展一下，下拉框中不但能够存取id，还能够存取别的信息。关键看实现的函数。

<script type="text/javascript">
$(function(){
	$.ajax({
		type : "get",
	    　　url : "/mlog/promgmt/queryWellInfo",//可写mapper文件sql，也能写controller的映射地址
	    　　contentType : "application/json; charset=utf-8",
	    　　dataType : 'json',
	    　　success : function(data) {
	    	var optionstring = "";
	    	for (var i in data) {//存取多个数据，显示的依旧是名字
                   optionstring += "<option value=\""+data[i].WELL_ID+"\"  wellTypeText=\""+data[i].WELL_TYPE_TEXT+"\"" +
                       "wellSortText=\""+data[i].WELL_SORT_TEXT+"\"  oilFieldBlockText=\""+data[i].OIL_FIELD_BLOCK_TEXT+"\"" +
                       "oilFieldText=\""+data[i].OIL_FIELD_TEXT+"\"  geographPosition=\""+data[i].GEOGRAPH_POSITION+"\">" + data[i].WELL_NAME + "</option>";
	    	}
	    	var wellSelect = $("#wellId");//对id为wellId的标签append
	    	wellSelect.append(optionstring);

	    	/* wellSelect.bind("click",function(e){//该方法就是对option的数据进行获取，这里获取wellId
	    		$('#workform #well').find('.textbox-f').each(function(){
	    			if($(this).attr("textboxname") != null && $(this).attr("textboxname") != ''){
	    				var data = $("#wellId").find("option:selected").attr($(this).attr("textboxname"));
	    				if(data!='undefined')
	        		        $(this).textbox("setValue",data);
	    				else
	    				　　$(this).textbox("setValue","");
	    			}
	        	});
	    	});	
 */
	    },
	});
});
</script>

函数实现存取的具体数据