jquery 实战两表级联

最新推荐文章于 2021-06-07 13:06:18 发布

fywxin

最新推荐文章于 2021-06-07 13:06:18 发布

阅读量741

点赞数

文章标签： jquery function date 产品 url null

本文链接：https://blog.csdn.net/fywxin/article/details/6504703

版权

Code:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script src="/pay/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//列出所有的产品类别，添加产品时需要选择产品类别
var url="/pay/productionCategory.do?from=add"
$.get(url,null,function (date){
objs=eval(date);
for(var i in objs) {
var obj=objs[i];
$("#productionCategory_id").append("<option value="+obj.id+">"+obj.id+" "+obj.name+"</option>");
}
});
//添加产品类别.同时在选择框中加入新添加的产品类别选项
$("#addProductionCategory").click(function(){
openWin("/pay/productionCategory/add.jsp","addProductionCategory",600,400);
})
//列出所有的工序，添加产品工序时需要选择工序
var url="/pay/process.do?from=add"
$.get(url,null,
function (date){
objs=eval(date);
$("#process_id").empty();
$("#process_id").append("<option disabled=disabled>ID 编号工序</option>")
for(var i in objs) {
var obj=objs[i];
$("#process_id").append("<option value="+obj.id+">"+obj.id+" "+obj.name+" "+obj.num+"</option>");
}
});
//添加工序.同时在选择框中加入新添加的工序选项
$("#addProcess").click(function(){
openWin("/pay/process/add.jsp","addProcess",600,400);
})
//双击产品行，然后在右边的table中显示此产品的所有工序信息，同事高亮此行
$("#inBody1 tr").dblclick(function(){
//覆盖旧的选定行的背景颜色
$("#inBody1 tr").css("background","white");
//设定选定行的背景色
$(this).css("background","red");
//获得选定行的产品的ID，此ID的值是该行tr的ID值
var findProductProByProduction_id=$(this).attr("id");
//根据产品的ID，查找该产品的所有工序
var url="/pay/production.do?findProductProByProduction_id="+findProductProByProduction_id;
$.get(url,null,function(date){
objs=eval(date);
$("#inBody2 tr").remove();
if(objs == "" || objs==null)
alert("该产品还未有设定工序");
for(var i in objs){
var obj=objs[i];
//把找到的工序按一定的格式显示到右边的table中，同时也要添加复选框
$("#inBody2").append("<tr height=30px style='background-color: white;border: 1px solid #C7DB51;font-size: 8pt;padding: 4px;'><td><input name=selId2 type=checkbox id="+obj.id+"></td><td>"
+obj.id+"</td><td>"+obj.num+"</td><td>"+obj.processName+"</td><td>"+obj.price+"</td><td>"+obj.waste+"</td><td>"+obj.productionName+"</td></tr>");
}
})
//设定要添加工序中产品的ID为选定的产品ID
$("#production_id").val($(this).attr("id"));
}).mouseover(function(){
$(this).css("cursor","pointer");
});
//添加一个产品工序
$("#addProcessBut").click(function(){
var ID=$("#id").val();
var id=$.trim(ID);
var productionID=$("#production_id").val();
var production_id=$.trim(productionID);
var processID=$("#process_id").val();
var process_id=$.trim(processID);
var NUM=$("#num").val();
var num=$.trim(NUM);
var PRICE=$("#price").val();
var price=$.trim(PRICE);
var WASTE=$("#waste").val();
var waste=$.trim(WASTE);
if(process_id=="0" || num=="" || price=="" || waste==""){
alert("表单未填写完整，请重新填写完整");
return false;
}
//double验证正则表达式
var reg =/^/d*/.?/d{0,2}$/;
if(!reg.test(price)){
alert("请在工序单价栏填写数字");
$("#price").get(0).select();
return false;
}
if(!reg.test(waste)){
alert("请在废品扣价栏填写数字");
$("#waste").get(0).select();
return false;
}
//id为0时表示添加操作，不为0，则表示更新，因为ID属性是hidden的，所以他只能是程序设定
if(id=="" || id==0 || id==null){
var url="/pay/productionProcess.do?command=addProductionProcess&from=add";
$.post(url,{production_id:production_id,process_id:process_id,num:num,price:price,waste:waste},
function (date){
obj=eval(date);
//添加到数据库后，在右table中，我们在他的最后添加上我们添加的一行，BUG：但是它的复选框的值是无效的，虽然可以显示出复选框
$("#inBody2").append("<tr height=30px style='background-color: white;border: 1px solid #C7DB51;font-size: 8pt;padding: 4px;'><td><input name=selId2 type=checkbox id="+obj.id+"></td><td>"
+obj.id+"</td><td>"+obj.num+"</td><td>"+obj.processName+"</td><td>"+obj.price+"</td><td>"+obj.waste+"</td><td>"+obj.productionName+"</td></tr>");
$("#num").val("");
$("#price").val("");
$("#waste").val("");
$("#process_id").val("0");
alert("添加成功");
});
}
//更新
else{
var url="/pay/productionProcess.do?command=updateProductionProcess";
$.post(url,{id:id,production_id:production_id,process_id:process_id,num:num,price:price,waste:waste},
function (date){
alert("更新成功");
$("#text").load("/pay/production.do");
});
}
});
//添加修改产品
$("#addProductionBut").click(function(){
//为避免与productionProcess的ID属性冲突，将id改为P_id
var ID=$("#P_id").val();
var id=$.trim(ID);
var NAME=$("#name").val();
var name=$.trim(NAME);
var UNIT=$("#unit").val();
var unit=$.trim(UNIT);
var NUM=$("#productionNum").val();
var num=$.trim(NUM);
var PC_id=$("#productionCategory_id").val();
var productionCategory_id=$.trim(PC_id);
if(productionCategory_id=="0" || num=="" || name=="" || unit==""){
alert("表单未填写完整，请重新填写完整");
return false;
}
if(id=="" || id==0 || id==null){
var url="/pay/production.do?command=addProduction&from=add";
$.post(url,{name:name,unit:unit,num:num,productionCategory_id:productionCategory_id},
function (date){
alert("添加成功");
$("#text").load("/pay/production.do");
});
}
//更新
else{
var url="/pay/production.do?command=updateProduction";
$.post(url,{id:id,name:name,unit:unit,num:num,productionCategory_id:productionCategory_id},
function (date){
alert("更新成功");
$("#text").load("/pay/production.do");
});
}
});
//产品更新查询操作
$("#updateProduction").click(function(){
var count=0;
var updateId=0;
//是复选框1的选项值
$("[name='selId1']").each(function(){
if($(this).attr("checked")){
count++;
updateId=$(this).attr("id");
}
});
if(count>1 || count<1) {
alert("更新操作，请选择一个");
return false;
} else {
var url="/pay/production.do?command=updateInput&id="+updateId;
$.get(url,null,function (date){
var obj=eval(date);
$("#P_id").val(obj.id);
$("#name").val(obj.name);
$("#productionNum").val(obj.num);
$("#unit").val(obj.unit);
var url="/pay/productionCategory.do?from=add";
$.get(url,null,function (date){
objs=eval(date);
$("#productionCategory_id").empty();
for(var i in objs) {
var obj2=objs[i];
if(obj2.id==obj.productionCategory_id)
$("#productionCategory_id").append("<option value="+obj2.id+" selected=selected>"+obj2.id+" "+obj2.name+"</option>");
$("#productionCategory_id").append("<option value="+obj2.id+">"+obj2.id+" "+obj2.name+"</option>");
}
});
});
}
});
//产品工序更新查询操作
$("#updateProductionProcess").click(function(){
var count=0;
var updateId=0;
$("[name='selId2']").each(function(){
if($(this).attr("checked")){
count++;
updateId=$(this).attr("id");
}
});
if(count>1 || count<1) {
alert("更新操作，请选择一个");
return false;
} else {
var url="/pay/productionProcess.do?command=updateInput&id="+updateId;
$.get(url,null,function (date){
var obj=eval(date);
$("#id").val(obj.id);
$("#waste").val(obj.waste);
$("#num").val(obj.num);
$("#price").val(obj.price);
$("#production_id").val(obj.production_id);
var url="/pay/process.do?from=add"
$.get(url,null,function (date){
objs=eval(date);
$("#process_id").empty();
$("#process_id").append("<option disabled=disabled>ID 编号工序</option>")
for(var i in objs) {
var obj2=objs[i];
if(obj2.id==obj.process_id)
$("#process_id").append("<option value="+obj2.id+" selected=selected>"+obj2.id+" "+obj2.name+" "+obj2.num+"</option>");
$("#process_id").append("<option value="+obj2.id+" >"+obj2.id+" "+obj2.name+" "+obj2.num+"</option>");
}
});
});
}
});
//删除操作
$("[name=del]").click(function(){
var count=0;
var delIds="";
//因为有div所以是.parent().parent()
if($(this).parent().parent().attr("id")=="td1_2"){
$("[name='selId1']").each(function(){
if($(this).attr("checked")){
count++;
delIds=delIds+$(this).attr("id")+",";
}
});
}else{
$("[name='selId2']").each(function(){
if($(this).attr("checked")){
count++;
delIds=delIds+$(this).attr("id")+",";
}
});
}
delIds=delIds.substring(0,delIds.length-1);
if(count<1){
alert("删除操作，请选择一个");
return false;
} else {
if(confirm('确定要删除{'+delIds+'}记录吗?>')){
var url="";
if($(this).parent().parent().attr("id")=="td1_2")
url="/pay/production.do?command=delProduction&ids="+delIds;
else
url="/pay/productionProcess.do?command=delProductionProcess&ids="+delIds;
$.get(url,null,
function (date){
alert("删除ID为{"+delIds+"}记录成功");
//实现局部刷新
$("#text").load("/pay/production.do");
});
} else {
//取消原来的选择
$("[name=cancel]").click();
return false;
}
}
});
//全选
$("[name=selectAll]").click(
function(){
if($(this).parent().attr("id")=="td1_1")
$("[name='selId1']").attr("checked",'true');
if($(this).parent().attr("id")=="td2_1")
$("[name='selId2']").attr("checked",'true');
});
//取消全选
$("[name=cancel]").click(
function(){
if($(this).parent().attr("id")=="td1_1")
$("[name='selId1']").removeAttr("checked");
if($(this).parent().attr("id")=="td2_1")
$("[name='selId2']").removeAttr("checked");
});
//反选
$("[name=inverse]").click(
function(){
if($(this).parent().attr("id")=="td1_1")
$("[name='selId1']").each(function(){
this.checked = !this.checked;
});
if($(this).parent().attr("id")=="td2_1")
$("[name='selId2']").each(function(){
this.checked = !this.checked;
});
});
});
function openWin(url,name,w,h,s){
sb = s == "1" ? "1" : "0";
l = (screen.width - w)/2;
t = (screen.height - h)/2;
sFeatures = "left="+ l +",top="+ t +",height="+ h +",width="+ w
+ ",center=1,scrollbars=" + sb + ",status=0,directories=0,channelmode=0";
openwin = window.open(url , name , sFeatures );
if (!openwin.opener)
openwin.opener = self;
openwin.focus();
return openwin;
}
</script>
<table id="myTable1" border="0" cellpadding="0" cellspacing="1" width="46%" style="font-family:arial;background-color: #C8D7E3;margin:3px 15px 3px 4px;font-size: 8pt;float:left;">
<thead>
<tr height="30px" style="font-size: 8pt;padding: 4px;border: 1px solid #C7DB51;background-color: #9FC9E5;">
<th></th>
<th>I D值</th>
<th>编号</th>
<th>名称</th>
<th>单位</th>
<th>产品类别</th>
</tr>
</thead>
<tbody id="inBody1">
<c:forEach items="${list }" var="list">
<tr id="${list.id }" height="30px" style="background-color: white;border: 1px solid #C7DB51;font-size: 8pt;padding: 4px;">
<td><input name="selId1" type="checkbox" id=${list.id } ></td>
<td>${list.id } </td>
<td>${list.num } </td>
<td>${list.name }</td>
<td>${list.unit }</td>
<td>${list.productionCategory.name }</td>
</tr>
</c:forEach>
</tbody>
<tr bgcolor="white" height="30px">
<td colspan="4" width="50%" id="td1_1"><a name="selectAll" href="#">全选</a><a name="cancel" href="#">重置</a><a name="inverse" href="#">反选</a></td>
<td colspan="2" width="50%" id="td1_2"><div align="right"><a id="updateProduction" href="#" >更新</a><a name="del" href="#" >删除</a></div></td>
</tr>
<tr bgcolor="#ECE9D8" height="30px">
<td colspan="6" width="100%" style="text-align:center;font-size: 15pt;color:#6BC629;">增加产品</td>
<td><input type="hidden" id="P_id" name="P_id"/></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3" width="30%">产品类别:</td>
<td colspan="3" width="70%"> <select id="productionCategory_id" name="productionCategory_id">
<option disabled="disabled">ID 类别</option>
</select>
<a id="addProductionCategory" href="#">添加产品类别</a></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">产品编号:</td>
<td colspan="3"><input name="productionNum" id="productionNum" type="text"></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">产品名称:</td>
<td colspan="3"><input name="name" id="name" type="text"></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">计量单位:</td>
<td colspan="3"><input name="unit" id="unit" type="text"></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3"></td>
<td colspan="3"><input type="button" id="addProductionBut" size="20" name="addProductionBut" value="添加产品"/></td>
</tr>
</table>
<table id="myTable2" border="0" cellpadding="0" cellspacing="1" width="50%" style="font-family:arial;background-color: #C8D7E3;margin:3px 0pt 3px;font-size: 8pt;">
<thead>
<tr height="30px" style="font-size: 8pt;padding: 4px;border: 1px solid #C7DB51;background-color: #9FC9E5;">
<th></th>
<th>I D值</th>
<th>工序编号</th>
<th>工序名称</th>
<th>工序单价</th>
<th>废品扣费</th>
<th>所属产品</th>
</tr>
</thead>
<tbody id="inBody2">
</tbody>
<tr bgcolor="white" height="30px">
<td colspan="4" width="50%" id="td2_1"><a name="selectAll" href="#">全选</a><a name="cancel" href="#">重置</a><a name="inverse" href="#">反选</a></td>
<td colspan="3" width="50%" id="td2_2"><div align="right"><a id="updateProductionProcess" href="#" >更新</a><a name="del" href="#" >删除</a></div></td>
</tr>
<tr bgcolor="#ECE9D8" height="30px">
<td colspan="7" width="100%" style="text-align:center;font-size: 15pt;color:#6BC629;">添加所选产品的工序</td>
<td><input type="hidden" id="production_id" name="production_id"/><input type="hidden" id="id" name="id"/></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3" width="30%">选择工序:</td>
<td colspan="4" width="70%"><select id="process_id" name="process_id">
<option disabled="disabled">ID 编号工序</option>
</select>
<a id="addProcess" href="#">添加一个工序</a> </td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">工序编号:</td>
<td colspan="4"><input type="text" size="40" id="num" name="num"/></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">工序单价:</td>
<td colspan="4"><input type="text" size="40" id="price" name="price"/></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3">废品扣费:</td>
<td colspan="4"><input type="text" size="40" id="waste" name="waste"/></td>
</tr>
<tr bgcolor="#ECE9D8">
<td colspan="3"></td>
<td colspan="4"><input type="button" id="addProcessBut" size="20" name="addProcessBut" value="添加产品工序"/></td>
</tr>
</table>
</body>
</html>

fywxin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 实战两表级联

Code: "java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> "/common/common.jsp" %> "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
复制链接

扫一扫