我的jQuery动态表格插件二

2025-02-13 技术教程

本篇博客是我写在离职后，昨天刚辞职和交接完任务，准备离开。其实我有很多不舍，但是最终还是选择了离开，许多苦楚都埋在我的心底。哎，趁回成都找工作的机会是该好好休息一下了。

在上篇我的jQuery动态表格插件中介绍了插件的基本使用方法.在实际运用的时候出现了一些其他的需求,所以插件再次升级,增加了一些辅助功能.

1：EnterToTab:$(“selector”). EnterToTab(),是的selector中的空间可以回车变为tab键使用，方便用户的输入。

代码简析：IE：

其他浏览器：主要针对firefox，因为ff中的时间的键值码，是一个制度属性，所以我们不能通过和ie一样的方式来处理，只有我们自己处理是的下一个可以focus控件focus。

ViewCode $("input,select",this).not(":button").not(":disabled,:hidden").live("keypress",function(evt){ if(evt.keyCode==13){ varfields=$(this).parents('form:eq(0),body').find('button,input,textarea,select').not(":disabled,:hidden"); varindex=fields.index(this); if(index>-1&&(index+1)<fields.length){ fields.eq(index+1).focus(); } returnfalse; } }); 复制代码

2：重新处理的计算列和汇总事件，在原来我们的事件直接绑定的change事件，这样有时在我们的外部手动触发更新的时候，不好的代码容易出现循环调用，而导致内存不足。所以事件采用了，jQuery的命名空间，change.Calculates。并提供了手动更新方法，$(“selector”).updateCalculates（）.

3:加入了事件处理，有时我们需要对控件或者样式做一些特殊处理，但是由于table中有很多这样的列是的我们不好定位，所以增加了一系列时间出入jQuery的table 行tr对象，以供特殊处理定位。

主要有：

addRowing:增加行前触发事件：参数arg,属性有cancel可以供取消增加操作，rowTemplate改变某一行的增加行模板。

addRowed:增加行以后，参数为行对象来定位，以供处理特殊的js控件，脚本执行或者css样式处理等等。

removeRowing:删除行之前触发，参数cancel，可以取消操作，row为需要删除的行对象。

removeRowed:删除行之后触发的事件。还没有想到需要什么参数，所以是一个{}对象。我觉得一般不需要什么特殊参数。

4：扩展的对html的控件支持，在上一个版本中默认支持，支持text，label，checkbox，radio，label，td，textarea的取值。其中radio取值选中value，checkbox取值为所有选中行value的“，”号分隔字符串。但是在我们的实际运用中还会用到一些特殊的js控件，如我实际中用到的Jquery EasyUi的ComboTree这些，需要上边提供的事件addRowed中一些js处理，以及获取值getSource中获取值的处理，所以提供了，一个对数据取值getValue的自定义取值委托。

customerFunction: null, //column:列，func：获取Value function

查看 <scripttype="text/javascript"> window.FiannceBudget=newArray();//[200,300,200,300,44]; window.FiannceBudget["1"]=200; window.FiannceBudget["2"]=402; window.FiannceBudget["5"]=121; window.FiannceBudget["6"]=345;//类型6（费用2-）自用的id）的预算额。 window.TreeSource=[{ "id":-1, "text":"费用1", "iconCls":"icon-ok", "children":[{ "id":1, "text":"公用", },{ "id":2, "text":"自用", "state":"open"}] }, { "id":-1, "text":"费用2", "iconCls":"icon-ok", "children":[{ "id":5, "text":"公用"},{ "id":6, "text":"自用", "state":"open"}] } ]; </script> 复制代码

Html前台代码：

ViewCode <div> <tablestyle="width:100%;"border="1"cellpadding="0"cellspacing="0"class="TableStyle"> <thead> <tr> <td> 序号 </td> <td> 费用类型 </td> <td> 预算额 </td> <td> 审批额 </td> <td> 差补（预算额） </td> <tdstyle="width:150px;"> <aclass="add"> <imgalt="增加"src="Image/add.png"style="border:0px;width:16px;height:16px"/>增加</a>   <aclass="delete"style="cursor:hand;"> <imgalt="删除"src="Image/delete.png"style="border:0px;width:16px;height:16px"/>删除</a> </td> </tr> </thead> <tbody> <asp:LiteralID="Literal1"runat="server"></asp:Literal> <trfixed="true"xmlitem="total"><!—汇总列-à <tdcolspan="2"align="center"style=""> 合计： </td> <td> <inputreadonly='readonly'type="text"id="totalBudget"property='totalBudget'/> </td> <td> <inputreadonly='readonly'type="text"id="totalReal"property='totalReal'/> </td> <td> <inputreadonly='readonly'type="text"id="totalReduction"property='totalReduction'/> </td> <tdalign="center"> </td> </tr> </tbody> </table> </div> <asp:HiddenFieldID="HiddenField1"runat="server"/> JquerydynamicTablecode: <scripttype="text/javascript"> $(function(){ varrowTemplate="<tr>"+ "<tdstyle='text-align:center;'>"+ "<labelclass='rownum'property='SortNum'>"+ "</label>"+ "</td>"+ "<td>"+ "<inputproperty='FinanceType'style='width:200px;'/>"+ "</td>"+ "<td>"+ "<inputreadonly='readonly'property='FinanceBudget'>"+ "</td>"+ "<td>"+ "<inputtype='text'class='number'property='FinanceReal'/>"+ "</td>"+ "<td>"+ "<inputreadonly='readonly'property='FinanceReduction'>"+ "</td>"+ "<tdalign='center'style='width:150px;text-align:center;'><aclass='deleterow'style='cursor:hand;'>"+ "<imgalt='删除'src='Image/delete.png'style='border:0px;width:16px;height:16px'/>删除</a></td>"+ "</tr>"; //初始化原来页面ComboTree varctree=$(":[property='FinanceType']"); ctree.each(function(){ $(this).combotree({"onBeforeSelect":function(node){if(node.id==-1){returnfalse;}},"onChange":function(newvalue,oldvalue){ $(this).val(newvalue).trigger("change"); } }).combotree("loadData",TreeSource.slice(0)); }); // vartab=$("table").dynamicTable( { addTrigger:".add", removeTrigger:[{selector:".delete",handler:"first"},{selector:".deleterow",handler:"current"}], rowTemplate:rowTemplate, addPosition:-1, DefaultRowCount:3, Calculates:[{selector:"#totalBudget",column:"FinanceBudget",func:"sum"},{selector:"#totalReal",column:"FinanceReal",func:"sum"},{selector:"#totalReduction",column:"FinanceReduction",func:"sum"}], CalculatesColumn:[{trigger:["FinanceType","FinanceReal"],column:'FinanceBudget',func:function(o,rowobj,$tr){ varv=parseFloat(rowobj.FinanceType); v=window.FiannceBudget[v]; $(o).val(v); var$FinanceReal=$tr.find(":[property='FinanceReal']"); varv1=parseFloat($FinanceReal.val()); if(!isNaN(v1)){ if(v1>v){ $FinanceReal.val(v); v1=v; } }else{ $FinanceReal.val(0.00);// v1=0; } varb=(v-v1); if(isNaN(b)) b=0; $tr.find(":[property='FinanceReduction']").val(b.toString()); $($tr).parent().parent().updateCalculates();//更新计算 } }] , addRowed:function(arg){ varctree=$(":[property='FinanceType']",arg); var$FinanceBudget=$(":[property='FinanceBudget']",arg); ctree.combotree({"onBeforeSelect":function(node){if(node.id==-1){returnfalse;}},"onChange":function(newvalue,oldvalue){ $FinanceBudget.val(window.FiannceBudget[newvalue]); ctree.val(newvalue); ctree.trigger("change.CalculatesColumn"); } }). combotree("loadData",TreeSource.slice(0)); } }); $("#Button1").bind("click",function(){ alert(tab.getSource({saveSelector:"#HiddenField1"})); }) $(".number").live("keyup",function(){ this.value=this.value.replace(/[^-\d\.]/g,''); }).live("keydown",function(e){ if(e.which==189){ //$(this).val(-1*parseFloat($(this).val())).trigger("change"); e.stopPropagation(); e.preventDefault(); }elseif(e.which==190){ if($(this).val().indexOf(".")!=-1){ e.stopPropagation(); e.preventDefault(); } } }); }); </script> 复制代码

在上一篇文章我的jQuery动态表格插件中有人问我如果在后台处理，数据，我所以在本次demo中特别利用dataset处理成为datatable：这里的处理时存在一个静态变量ds中。

ViewCode publicpartialclassdynamicTableDemo1:System.Web.UI.Page { privatestaticSystem.Data.DataSetds; protectedvoidPage_Load(objectsender,EventArgse) { if(IsPostBack) { } } protectedvoidBindTable() { if(ds!=null&&ds.Tables["item"]!=null) { List<string>list=newList<string>(); foreach(System.Data.DataRowiteminds.Tables["item"].Rows) { list.Add(string.Format("<tr>"+ "<tdstyle='text-align:center;'>"+ "<labelclass='rownum'property='SortNum'>"+ "</label>"+ "</td>"+ "<td>"+ "<inputproperty='FinanceType'style='width:200px;'{0}/>"+ "</td>"+ "<td>"+ "<inputreadonly='readonly'property='FinanceBudget'{1}>"+ "</td>"+ "<td>"+ "<inputtype='text'class='number'property='FinanceReal'value='{2}'/>"+ "</td>"+ "<td>"+ "<inputreadonly='readonly'property='FinanceReduction'value='{3}'>"+ "</td>"+ "<tdalign='center'style='width:150px;text-align:center;'><aclass='deleterow'style='cursor:hand;'>"+ "<imgalt='删除'src='Image/delete.png'style='border:0px;width:16px;height:16px'/>删除</a></td>"+ "</tr>",item["FinanceType"].ToString()==""?"":"value='"+item["FinanceType"]+"'",item["FinanceBudget"].ToString()==""?"":"value='"+item["FinanceBudget"]+"'",item["FinanceReal"],item["FinanceReduction"])); } Literal1.Text=string.Join("",list.ToArray()); } } protectedvoidbutton1_click(objectsender,EventArgse) { varxml=HiddenField1.Value; ds=newSystem.Data.DataSet(); ds.ReadXml(newSystem.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(xml))); BindTable(); } } 复制代码

最后在上效果图：

后台数据源：

插件基本使用请参见：我的jQuery动态表格插件

本博客中其他jQuery资料：我jQuery系列之目录汇总

插件下载

搜集数据源xml

例如：customerFunction: { "age": function(o) { return o.val() + 1; } },这里定义property为age的取值方式为：其值+1。Jquery EasyUi的ComboTree那么我们可以定义为

customerFunction: { "type": function(o) { return $(o).combotree(“getValue”)} }.

5:默认行数, DefaultRowCount,在我们的处理中用户经常会要求你能不能初始化就给我们默认几行啊，我难得一个一个的点击增加。如果你也有这样的需求，那么这个属性就可以帮助你轻松的搞定了。

6：增加了xml搜集类型的节点名自定义，在我们的某些处理中为了，搜集某些固定行的数据，但是为对xml其他节点的区分，所以，在本次的版本中增加了一个xmlitem，如xmlitem="total"设置。这个需要时来自我的一个同事的动态行，以及还有动态增加列的需要处理中。

jQuery dynamicTable版本仍会随着用户的需求一步一步的更新。同时也希望大家提出你的宝贵意见，你认为还需要那些功能，或者是对于代码的重构等等。

下面来一个jQuery EasyUi ComboTree的的demo：一个资金预算审批的例子。