//输入表单即时创建明细列表
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即时创建明细列表 .调用事例一:
正品库 次品库 三等品库 调用事例二:
