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>

函数实现存取的具体数据

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

今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法该方法通过序列化表单值,创建 URL 编码文本字符串序列化的值可在 ...
XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)
1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...
3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
html基础：jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
多表关联解决数据在MVC显示
由于子表的某些字段是父表的外键,正常情况之下,显示的只是一个键值.如下图的Highlight列,如果这样显示,确实不友好. 如果是在创建或是编辑的模式之下,我们可以使用下拉菜单来解决,如<Htm ...
Easyui Ajax验证Form表单。。。
今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...
关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
oracle多表关联删除数据表记录方法
oracle多表关联删除的两种方法第一种使用exists方法 delete from tableA where exits ( select 1 from tableB Where tableA.i ...
在 easyui中获取form表单中所有提交的数据拼接到table列表中
form表单=====  <div id="usingProdctMsgDiv" style="display: ...

随机推荐

block一点也不神秘————如何利用block进行回调
我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...
SDP（3）：ScalikeJDBC- JDBC-Engine：Fetching
ScalikeJDBC在覆盖JDBC基本功能上是比较完整的,而且实现这些功能的方式比较简洁,运算效率方面自然会稍高一筹了.理论上用ScalikeJDBC作为一种JDBC-Engine还是比较理想的:让 ...
html5移动端meta自动适应标签
控制显示区域各种属性: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc ...
rsync - 远程同步工具
一直没有对这个命令太有深入的理解简介 rsync 即 remote sync,一个远程与本地文件同步工具.rsync 使用的算法能够最小化所需复制的数据,因为它只移动那些修改了的文件. rsync ...
SerialChart串口示波器的成功调试
2018-01-1601:29:06 深夜更新一波串口示波器! http://t.cn/RQMA3uq 心得体会总之将数据输出设置为","分割的形式即可重点注意事项!!!! m ...
python_py2和py3读写文本区别
python2和python3的区别? python 2 str 对应 python3 bytes python 2 uincode 对应 ...
基于jsmpeg库下使用ffmpeg创建视频流连接websocket中继器传输视频并播放
这个功能的基本工作是这样的: 1.使用node运行jsmpeg库下的websocket-relay.js文件,这个文件的作用是创建一个websocket视频传输中继器 2.运行ffmpeg,将输出发送 ...
Spring中Quartz的配置及corn表达式
Quartz可以用来执行任务调度功能,如间隔一定时间调用执行任务.用起来还是蛮方便的.只要将你要调用的类配置到Spring配置文件即可. 在Spring的配置文件中配置Quartz. <!-- ...
Linux cp 移动的时候报错
报错如下: cp: omitting directory `./nginx-1.12.1' 原因: 要移动的目录下还存在有目录解决: cp -r 文件名地址注意: 这里的-r代表递归 ...
MapReduce寻找共同好友
1.测试文件 A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E:B,C,D,M,L F:A,B,C,D,E,O,M G:A,C,D,E,F H:A,C,D,E ...

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

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

随机推荐

热门专题