JQuery插件第二十个:利用json数组即时创建明细列表

//输入表单即时创建明细列表
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>