JQueryプラグイン第20個:json配列を利用して即時に詳細リストを作成します.
23849 ワード
//
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;
}
}
<!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>