//输入表单即时创建明细列表
jQuery.luru={
//统计明细数量
countNum:function() {
var sum = 0;
$("span[name='"+jQuery.luru.Num+"']").each(function() {
if(!isNaN($(this).text())&& $(this).text()!=''){
sum += parseInt($(this).text());
}
});
var $box = $(jQuery.luru.sumId);
if (sum > 0) {
var txt = $box.text().replace(/(\d+)/g, sum);
$box.text(txt); $box.parent().show();
} else {
$box.parent().hide();
}
},
//统计红冲明细数量
countHcNum:function() {
var sum = 0;
$("td[id^='num']").each(function() {
sum += parseInt($(this).text());
});
var jianNum = 0;
$("input[name='HcNum']").each(function() {
jianNum += parseInt($(this).val());
});
sum += jianNum;
var $box = $(jQuery.luru.sumId);
if (sum > 0) {
var txt = $box.text().replace(/(\d+)/g, sum);
$box.text(txt);
$box.parent().show();
} else {
$box.parent().hide();
}
},
//载入红冲明细所在页面的事件
addHc:function() {
var hcnum = $("input[name='HcNum']");
hcnum.each(function(index) {
var num = $(this); var i = index;
//方便删除一条记录
num.parent().parent().data("index", i);
num.bind("blur", function() {
alert(i);
jQuery.luru.setHCNum($(this).get(0), i); jQuery.luru.countHcNum();
}).bind("keyup", function() {
var val = $(this).val().replace(/[^\d\-]/g, '');
$(this).val(val);
}).bind("beforepaste", function() {
clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d\-]/g, ''));
});
if (num.val() == "0" || num.val() == ""){
var tempnum = $("#num" + i).text();
num.val("-" + parseInt(tempnum.trim()));
}
$("#del" + i).bind("click", function() { jQuery.luru.DeleteRow($(this)); jQuery.luru.countHcNum(); });
});
$(jQuery.luru.saveId).click(function() {
jQuery.luru.saveInfo();
});
},
//导入明细操作，从子页面或后台传回json数值，载入明细列表
mx:function(jsonData) {
//alert(jsonData);
var objData = $.parseJSON(jsonData);
$.each(objData, function(index, term) {
jQuery.luru.saveMx(term);
});
},
setHCNum:function(obj, index) {
var tempnum = parseInt($("#num" + index).text());
if (Math.abs(parseInt(obj.value)) > tempnum) {
alert("所填数值的绝对值不应大于库存数");
obj.value = -1 * tempnum;
obj.focus();
}
jQuery.luru.items[index].HCNum = obj.value;
if(parseInt(obj.value)==0){jQuery.luru.items[index].Del = true;}
},
//输入框是显示还是隐藏
show:function() {
var input=jQuery.luru.inputId;
if ($(input).css('display') == "none") {
$(input).css('display',"block");
}
else {
$(input).css('display',"none");
}
},
//删除一条记录, $obj为jQuery对象
DeleteRow:function($obj)
{
var index=parseInt($obj.parent().parent().data("index"));
jQuery.luru.items[index].Del = true;
$obj.parent().parent().remove();
},
//更新一个字段, $obj为jQuery对象
UpdateFeild:function($obj)
{
var index=parseInt($obj.parent().parent().data("index"));
jQuery.luru.items[index][$obj.attr("name")] = $obj.val();
},
//保存数组集合到隐藏域控件
saveInfo:function() {
var data = "[";
for (var i = 0; i < jQuery.luru.items.length; i++) {
data += "{";
$.each(jQuery.luru.items[i], function(a, b) {
data += "'" + a + "':'" + b + "',";
});
data += "},";
}
data += "]";
$(jQuery.luru.jsonDataId).val(data);alert(data);
return true;
},
//明细列表Id
mxId:"#tbDetail",
//保存按钮Id
saveId:"#IBtnSave",
//记录Json数据的隐藏域控件
jsonDataId:"#hdJsonData",
//打开输入框的按钮Id
mxAdd:"#mxAdd",
//输入框Id
inputId:"#tr01",
//统计框Id
sumId:"#sumBox",
//Json数组
items : [],
//商品有关编号
ID:"",
//商品有关数量
Num:"",
//商品导入页面
impSrc:"",
//导入操作
addImp:function() {
document.getElementById('DivSelGoods').style.top = 30;
document.getElementById('DivSelGoods').style.left = 100;
document.getElementById('IFSelGoods').src = jQuery.luru.impSrc;
document.getElementById('DivSelGoods').style.display = 'block';
},
//添加表单的页面事件
add:function(jsonobj) {
$("img[src*='daoru']").click(function() { jQuery.luru.addImp(); }).css({ cursor: 'pointer' });
$(jQuery.luru.mxAdd).click(function() {
jQuery.luru.show();
}).css({ cursor: "pointer" });
$("#" + jQuery.luru.ID).focus(function() {
$(this).css({ "imeMode": "disabled" });
});
$("#" + jQuery.luru.Num).bind("keyup", function() {
var val = $(this).val().replace(/[^\d]/g, '');
$(this).val(val);
}).bind("beforepaste", function() {
clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g, ''));
});
$(jQuery.luru.saveId).click(function() {
jQuery.luru.saveInfo();
});
//扫描枪回车事件
$(document).keydown(function(e) {
if((e.keyCode == 13) && (e.target == document.getElementById(jQuery.luru.ID) || e.target == document.getElementById(jQuery.luru.Num))) //光标在商品编号时回车保存,光标移到商品编号
{
$("#" + jQuery.luru.Num).val(1);
for(var key in jsonobj){
if($("#" + key).length>0){ jsonobj[key]=$("#" + key).val(); }
}
//添加明细
jQuery.luru.saveMx(jsonobj);
$("#" + jQuery.luru.ID).focus();
return false;
}
});
},
//添加行
AddRow:function(table,jsonobj,i){
var evenRow = table.rows[0];
var oddRow = table.rows[1];
var newRow = (table.rows.length%2==1)?oddRow.cloneNode(true):evenRow.cloneNode(true);
newRow.style.display='';
$(newRow).data("index", i);
for(var key in jsonobj){
if(key!='Del'){
$(newRow).find('[name="'+key+'"]').each(function(){
jQuery.luru.Set($(this),jsonobj[key]);
$(this).blur(function(){
jQuery.luru.UpdateFeild($(this));
});
});
}else{
$(newRow).find('[name="Del"]').each(function(){
$(this).click(function(){ jQuery.luru.DeleteRow($(this)); });
});
}
}
table.tBodies[0].appendChild(newRow);
},
//给Json字段相关HTML控件赋值
Set:function($obj,value){
if(typeof $obj.attr('type')!='undefined'){
$obj.val(value);
}else{
$obj.text(value);
}
},
//获取Json字段相关HTML控件的值
Get:function($obj){
if(typeof $obj.attr('type')!='undefined'){
return $obj.val();
}else{
return $obj.text();
}
},
//添加明细方法
saveMx:function(item) {
if (typeof item != 'object') return; //不是对象就退出
var Json=jQuery.luru.items;
var addItemIndex = Json.length;
if(jQuery.luru.ID!="" && jQuery.luru.Num!=""){
//两个arr成员为jquery对象
var arr = [$("#" + jQuery.luru.ID), $("#" + jQuery.luru.Num)];
if (item[jQuery.luru.ID] == null || item[jQuery.luru.ID]=="") {
alert(arr[0].parent().prev().text()+"不能为空！");
arr[0].focus();
return false;
}
if (item[jQuery.luru.Num] == null || item[jQuery.luru.Num]=="") {
alert(arr[1].parent().prev().text()+"不能为空！");
arr[1].focus();
return false;
}
for (var index = 0; index < Json.length; index++) {
if (item[jQuery.luru.ID] == Json[index].ProID) {
if (!Json[index].Del) {
var flag = false;
$(jQuery.luru.mxId+" tr").each(function(){
if (item[jQuery.luru.ID] == jQuery.luru.Get($(this).find('[name="'+jQuery.luru.ID+'"]'))) {
var $next = $(this).find('[name="'+jQuery.luru.Num+'"]');
var sum=parseInt(jQuery.luru.Get($next)) + parseInt(item[jQuery.luru.Num]); //数量加1
jQuery.luru.Set($next,sum);
arr[0].val(''); //清空商品编号输入框
arr[0].focus(); //商品编号输入获取焦点
Json[index][jQuery.luru.Num] = sum;
flag = true; //变量控制跳出整个循环
return false; //跳出$.each
}
});
if (flag) {
jQuery.luru.countNum();
return;
}
}
else {
//Del为true时，在json数组中新记录覆盖到原来删除记录的位置
addItemIndex = index;
break;
}
}
}
jQuery.luru.AddRow($(jQuery.luru.mxId).get(0),item,addItemIndex);
//清空输入框数据
arr[0].val('');
arr[1].val('');
$(jQuery.luru.inputId).css("display", "block");
arr[0].focus();
//统计明细总数
jQuery.luru.countNum();
}
//将本次的值添加到数组集合
var json={};
for(var key in item){
json[key]=item[key];
}
Json[addItemIndex] = json;
}
}
以上jquery类利用json数组,通过输入表单操作非Ajax即时创建明细列表 .调用事例一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script src="../js/luru.js" type="text/javascript"></script>
<script>
$(function() {
/*注意:
1.仓库隐藏控件为了让库位记录有初始内容,Id必须与json的仓库键名一致
2.明细列表模板因为是隔行换色,所以预先设置两条记录,模板需要避免同实际明细一起显示,所以隐藏模板列表
3.显示数据的Html控件(input或select)或链接直接放在td中,不能再包裹span之类的标签,否则例如删除事件失效.
*/
$("select[name=KWID]").each(function(){$(this).html($("#KWID").html());});
jQuery.luru.ID = 'ProID';
jQuery.luru.Num = 'QTRKNum';
jQuery.luru.impSrc = 'ImpMX.aspx';
jQuery.luru.add({ ProID:'', QTRKNum:'', ProRemark:'', KWID: 0, Del: false });
$("#daoru").click(function(){
var d=$("#readyimp").val().replace(/'/g,"\"").replace(/,]/g,"\]").replace(/,}/g,"\}");//json数组单引号必须换成双引号,空对象必须去除
jQuery.luru.mx(d);
}).css("cursor","pointer");
});
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="main">
<div id="content">
<div class="shdlr">
<table width="100%" style=" border:1px solid #D7D7D7; margin-top:-1px;">
<tr>
<td class="a20" style="text-align:right;">导入数据:</td>
<td colspan="3" class="a20"><textarea name="textarea" id='readyimp' style="width:500px; height:100px; border:1px solid #D7D7D7; "> </textarea></td>
</tr>
</table>
</div>
<div class="shdlr">
<p style="font-size:14px; font-weight:bold; padding-left:20px; color:#666;">明细信息</p>
<table width="100%" class="a22">
<tr>
<td width="14%" class="a13" align="right"><img src="../images/xinzeng.jpg" /></td>
<td width="14%" class="a13"><img src="../images/shanchu.jpg" /> <img src="../images/daoru.jpg" id='daoru' /></td>
<td width="7%" class="a13" style="text-align:right;"> </td>
<td colspan="2" class="a13"> </td>
</tr>
</table>
<table width="100%" class="a22" >
<tr id=tr01 >
<td width="14%" class="a14" style="text-align:right;">编号：</td>
<td width="14%" class="a14">
<input name="ProID" id="ProID" type="text" class="sousuo3" value="" />
</td>
<td width="7%" class="a14" style="text-align:right;">数量：</td>
<td colspan="2" class="a14">
<input name="QTRKNum" id="QTRKNum" type="text" class="sousuo3" />
</td>
</tr>
</table>
<table width="100%" summary="操作1" class="a11">
<tr>
<td width="9%">编号</td>
<td width="9%">库房</td>
<td width="15%">数量</td>
<td width="14%">备注</td>
<td width="14%">操作</td>
<td width="39%"> </td>
</tr>
</table>
<table width="100%" summary="操作1" class="a12" id='tbDetail' >
<tr style='display:none' >
<td class="a13" width="9%">
<span name='ProID' ></span></td>
<td class="a13" width="9%"><select name='KWID' ></select></td>
<td class="a13" width="15%"><span name=QTRKNum ></span></td>
<td width="14%" class="a13"><input name="ProRemark" type="text" class="a21" style="width:100px" /></td>
<td width="14%" class="a13">
<a href='javascript:void(0);' name=Del >删除</a></td>
<td class="a13" width="39%"> </td>
</tr>
<tr style='display:none' >
<td class="a14" width="9%"><span name='ProID' ></span></td>
<td class="a14" width="9%"><select name='KWID' ></select></td>
<td class="a14" width="15%"><span name=QTRKNum ></span></td>
<td width="14%" class="a14"><input name="ProRemark" type="text" class="a21" style="width:100px"/></td>
<td width="14%" class="a14" >
<a href='javascript:void(0);' name=Del >删除</a></td>
</tr>
</table>
<table width="100%" style="margin-bottom:10px;">
<tr>
<td class="a14" width="9%"> </td>
<td class="a14" width="9%"> </td>
<td width="15%" id='sumBox' >总数量0</td>
<td width="9%"> </td>
<td width="67%"> </td>
</tr>
</table>
<table width="100%">
<tr>
<td width="10%" class="a13"><img src="../images/querentijiao.jpg" alt="确认提交" id="IBtnSave" /></td>
</tr>
</table>
</div>
</div>
</div>
<!-- #main-->
</div>
<!--container-->
</div>
<!--#wrap-->
<select id='KWID' style='display:none' ><option value=1 selected=selected >正品库</option><option value=2 >次品库</option><option value=3 >三等品库</option></select>
<input type='hidden' id='hdJsonData' >
</body>
</html>
调用事例二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script src="../js/luru.js" type="text/javascript"></script>
<script>
$(function() {
/*注意:
1.仓库隐藏控件为了让库位记录有初始内容,Id必须与json的仓库键名一致
2.明细列表模板因为是隔行换色,所以预先设置两条记录,模板需要避免同实际明细一起显示,所以隐藏模板列表
3.显示数据的Html控件(input或select)或链接直接放在td中,不能再包裹span之类的标签,否则例如删除事件失效.
*/
var d=$("#jsonData").val().replace(/'/g,"\"").replace(/,]/g,"\]").replace(/,}/g,"\}");//json数组单引号必须换成双引号,空对象必须去除
jQuery.luru.mx(d);jQuery.luru.addHc();
});
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="main">
<div id="content">
<div class="shdlr">
<table width="100%" style=" border:1px solid #D7D7D7; margin-top:-1px;">
<tr>
<td class="a20" style="text-align:right;">预先载入数据:</td>
<td colspan="3" class="a20"><textarea id="jsonData" style="width:500px; height:100px; border:1px solid #D7D7D7; ">[{'ProID':'sdfsdf','QTRKNum':'2','ProRemark':'dsdfsdf','KWID':'2','Del':'false','HCNum':0},{'ProID':'1111','QTRKNum':'1','ProRemark':'gg','KWID':'2','Del':'false','HCNum':0},{'ProID':'dfgsdgsd','QTRKNum':'1','ProRemark':'','KWID':'1','Del':'false','HCNum':0}]</textarea></td>
</tr>
</table>
</div>
<div class="shdlr">
<p style="font-size:14px; font-weight:bold; padding-left:20px; color:#666;">明细信息</p>
<table width="100%" summary="操作1" class="a11">
<tr>
<td width="9%">编号</td>
<td width="9%">名称</td>
<td width="15%">数量</td>
<td width="15%">红冲数量</td>
<td width="14%">操作</td>
<td width="38%"> </td>
</tr>
</table>
<table width="100%" summary="操作1" class="a12">
<tr>
<td class="a13" width="9%">T152365</td>
<td class="a13" width="9%">T152365</td>
<td class="a13" width="15%" id='num0' ><span >23</span></td>
<td class="a13" width="15%"><input name="HcNum" type="text" class="a21" /></td>
<td width="14%" class="a13"><a href="javascript:void(0)" id=del0 >删除</a> </td>
<td class="a13" width="38%"> </td>
</tr>
<tr>
<td class="a14" width="9%">T152365</td>
<td class="a14" width="9%">T152365</td>
<td class="a14" width="15%" id='num1'><span >22</span></td>
<td class="a14" width="15%"><input name="HcNum" type="text" class="a21" /></td>
<td class="a14" width="14%"><a href="javascript:void(0)" id=del1 >删除</a> </td>
<td class="a14" width="38%"> </td>
</tr>
<tr>
<td class="a13" width="9%">T152365</td>
<td class="a13" width="9%">T152365</td>
<td class="a13" width="15%" id='num2' ><span >21</span></td>
<td class="a13" width="15%"><input name="HcNum" type="text" class="a21" /></td>
<td width="14%" class="a13"><a href="javascript:void(0)" id=del2 >删除</a> </td>
<td class="a13" width="38%"> </td>
</tr>
<tr>
<td class="a14" width="9%">T152365</td>
<td class="a14" width="9%">T152365</td>
<td class="a14" width="15%" id='num3'>20</td>
<td class="a14" width="15%"><input name="HcNum" type="text" class="a21" /></td>
<td width="14%" class="a14"><a href="javascript:void(0)" id=del3 >删除</a> </td>
<td class="a14" width="38%"> </td>
</tr>
</table>
<table width="100%" style="margin-bottom:10px;">
<tr>
<td class="a14" width="9%"> </td>
<td class="a14" width="9%"> </td>
<td width="15%" class="a14" id='sumBox' >总数量：0</td>
<td width="15%"></td>
<td width="14%"> </td>
<td width="38%"> </td>
</tr>
</table>
<table width="100%">
<tr>
<td width="10%" class="a13"><img src="../images/querentijiao.jpg" alt="确认提交" id=IBtnSave /></td>
</tr>
</table>
</div>
</div>
</div>
<!-- #main-->
</div>
<!--container-->
</div>
<input type='hidden' id='hdJsonData' >
</body>
</html>
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
