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: ...
随机推荐
- [原创]消灭eclipse中运行启动的错误:“找不到或无法加载主类”问题
最近一直遇到这个问题且根据网上的文章做法基本无法通过,故将自己的解决步骤记录及分享给大家. 一:环境必须要配置好. 试试在dos界面输入:java.javac 分别这两个命令是否能执行,如果都能执行恭 ...
- Linux文件
Linux文件类型 对于内核而言,所有打开的文件都是通过文件描述符引用(FD),文件描述符是一个非负整数,当打开现有问价或创建一个新文件时,内核向进程返回一个文件描述符. 按照惯例,shell把文件描 ...
- 一个故事讲明白线程的私家领地：ThreadLocal
张大胖上午遇到了一个棘手的问题,他在一个AccountService中写了一段类似这样的代码: Context ctx = new Context(); ctx.setTrackerID(.....) ...
- HTML中padding和margin的区别和用法
margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom ...
- AMS的适用场景
AMS适用于网络音视频应用的各种场合,可以独立作为直播点播平台应用,也可以嵌入到用户的各种应用平台中,为客户提供音视频核心支撑,不同于其它提供云服务租给客户使用的产品,AMS是一套安装在企业内部服务器 ...
- Linux批量ping脚本
根据鸟哥的ping脚本,我重新修改了一下.用到的知识有:read.Linux按行读取.shell输出效果调整等 其中Linux按行读取文件比较重要,可参看文下链接 1 脚本功能: 批量ping当前路径 ...
- 《剑指offer》数组中出现次数超过数组长度一半的数字
题目: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如 ...
- Intel DPDK 全面解读
高性能网络技术 随着云计算产业的异军突起,网络技术的不断创新,越来越多的网络设备基础架构逐步向基于通用处理器平台的架构方向融合,从传统的物理网络到虚拟网络,从扁平化的网络结构到基于 SDN 分层的网络 ...
- 浅谈python模块的导入操作
1.什么是模块 在Python中有一个概念叫做模块(module). 所谓模块,就是将代码量较大的程序分割成多个有组织的,彼此独立但双能互相交互的代码片段, 这些自我包含的有组织的代码段就是模块. 2 ...
- AOP 切面编程------JoinPoint ---- log日志
AOP 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件 ...