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: ...

随机推荐

sqllite小型数据库的使用
1.适用场景:免安装型数据库:数据量不大,本地化管理:不依赖其他第三方类库:2.具体使用方法:添加sqllite类库引用数据库连接定义,数据库以文件形式存储在sqllitedb/solution.d ...
hashCode方法和equals方法比较
为什么用HashCode比较比用equals方法比较要快呢?我们要想比较hashCode与equals的性能,得先了解HashCode是什么. HashCode HashCode是jdk根据对象的地址 ...
2017-07-11(sync basename dirname )
sync 在内存中尚未被更新的数据,就会被写入硬盘中:在关机或者重启前,最好多执行几次! basename 获取文件名 dirname 获取目录名
HTTP常用方法
GET : 获取资源 get方法用来请求访问已被URI识别的资源. 请求 GET /index.html HTTP/1.1 HOST:www.baidu.com 响应返回index.html的页面资 ...
互联网公司为啥不使用mysql分区表？
转:http://www.cnblogs.com/zhulin516114/p/7306708.html 缘起:有个朋友问我分区表在58的应用,我回答不出来,在我印象中,百度.58都没有听说有分区表相 ...
Django_form验证
需求: 当用户向Django后端以post提交数据的时候,无论前端是否进行数据合法验证,后端都需要对客户端提交过来的数据进行数据合法性验证,是否可以利用models中表类字段的约束来实现验证,并且可以 ...
Servlet--Servlet接口
servlet主要数据结构 Servlet 接口:主要定义了servlet的生命周期方法 ServletConfig接口:为servlet提供了使用容器服务的若干重要对象和方法. ServletCon ...
jdk源码->集合->ArrayList
类的属性 public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomA ...
redis数据类型-集合类型
集合类型在集合中的每个元素都是不同的,且没有顺序. 一个集合类型(set)键可以存储至多2 32-1个(相信这个数字对大家来说已经很熟悉了)字符串. 集合类型的常用操作是向集合中加入或删除元素.判断 ...
ELK日志管理搭建
目录: 一.介绍二.安装JDK 三.安装Elasticsearch 四.安装Kibana 五.安装Nginx 六.安装Logstash 七.安装Logstash-forwarder 八.测试系统环 ...

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

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

随机推荐

热门专题