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. MYSQL GROUP BY Optimization

    GROUP BY Optimization 常规的匹配group by(分组)操作子句是扫整表并且创建包含连续的分组行的临时表, 利用临时表得到group数据,运用appregate function ...

  2. Go_认识golang

    官方地址:https://golang.org/ 什么是Go? 支持并发.垃圾回收的编译型 系统编程语言 Go语言有哪些特点? 1. 类型安全 和 内存安全 2. 以非常直观和极低代价的方案实现高并发 ...

  3. CSS深入理解学习笔记之z-index

    1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...

  4. eclipse-java开发实用快捷键

    Expand All:ctrl+小键盘* Collapse All:ctrl+shift+小键盘/

  5. Linxu指令--date，cal

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1．命令格式: date [参数 ...

  6. BST,AVL,B,B+,B*,红黑树

    BST(右)和AVL(左) 比较:AVL树每个结点的左右子树的深度差的绝对值不大于1 B - tree 特点:所有结点都包含数据信息,不同查询的效率不同,特殊的:二阶B树就是AVL,三阶B树就是2-3 ...

  7. viewpager 设置预加载项

    live_pager.setOffscreenPageLimit(3); 防止viewpager 左右滑动 fragment消失

  8. HTML5图形绘制

    要在HTML5中绘制图形,首先要放置一个canvas元素 <canvas id="canvas" width="400" height="300 ...

  9. Android webView包装WebAPP

    前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要讲 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包, 原理是很简单 ...

  10. Centos7下Java开发基本环境搭建

    一.Centos7安装JDK 首先查看自己的机器上是否已经自带openjdk,命令如下: rpm -qa | grep jdk 如果存在,则按照如下命令进行依次卸载: yum -y remove fi ...