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>

函数实现存取的具体数据

easyui+ajax获取同表关联的数据的更多相关文章

  1. 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  2. XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)

    1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...

  3. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  4. html基础：jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  5. 多表关联解决数据在MVC显示

    由于子表的某些字段是父表的外键,正常情况之下,显示的只是一个键值.如下图的Highlight列,如果这样显示,确实不友好. 如果是在创建或是编辑的模式之下,我们可以使用下拉菜单来解决,如<Htm ...

  6. Easyui Ajax验证Form表单。。。

        今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...

  7. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  8. oracle多表关联删除数据表记录方法

    oracle多表关联删除的两种方法 第一种使用exists方法 delete from tableA where exits ( select 1 from tableB Where tableA.i ...

  9. 在 easyui中获取form表单中所有提交的数据 拼接到table列表中

    form表单===== <!-- 并用药品填写信息弹框 --> <div id="usingProdctMsgDiv" style="display: ...

随机推荐

  1. 读书笔记——《C++ Concurrency IN ACTION》

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  2. asp.net -mvc框架复习（7）-基于MVC搭建用户登录项目框架

    整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...

  3. 全栈开发之HTML快速入门（一）

    一.HTML 是什么? HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记 ...

  4. Hadoop问题：启动hadoop 2.6遇到的datanode启动不了

    问题描述:第一次启动输入jps都有,第二次没有datanode 日志如下: 查看日志如下: -- ::, INFO org.mortbay.log: Started HttpServer2$Selec ...

  5. js 原型规则与示例

    五大规则 1. 所有的引用类型( 数组 对象 函数 ) 都是 具有对象特性即自由拓展属性 (除了 "null")意外 2. 所有的引用类型(数组 对象 函数 ) 都有一个 prot ...

  6. SqlSession 同步为注册，因为同步未激活

    Creating a new SqlSessionSqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@7d620db9] ...

  7. Log4j源码解析--Layout类解析

    本文转载上善若水的博客,原文出处:http://www.blogjava.net/DLevin/archive/2012/07/04/382131.html.感谢作者的分享. Layout负责将Log ...

  8. java中的 private Logger log=Logger.getLogger(this.getClass());

    this.getClass()得到什么? this 表示当前对象的引用: getClass() 是 java.lang.Object 中的方法,它返回一个对象的运行时类: this.getClass( ...

  9. awk批量处理文件夹中所有文件

       #c=``     done

  10. lua版本的一个状态机

    这个状态机http://www.cnblogs.com/flytrace/p/5587033.html的lua版本 -- LUA 有实现枚举值的好办法么 local sc_enum = { -- ev ...