我的jQuery动态表格插件二

简介:

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

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

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

代码简析: IE

ExpandedBlockStart.gif
复制代码
if  ($.browser.msie) {

                $(host).live(
" keydown " function (evt) {

                    
if  (event.keyCode  ==   13 ) {

                        event.keyCode 
=   9 ; // 将键值13转化为9(tab);

                    }

                });

            }
复制代码

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

ExpandedBlockStart.gif
复制代码
$( " input,select " this ).not( " :button " ).not( " :disabled,:hidden " ).live( " keypress " function (evt) {

                    
if  (evt.keyCode  ==   13 ) {

                        
var  fields  =  $( this ).parents( ' form:eq(0),body ' ).find( ' button,input,textarea,select ' ).not( " :disabled,:hidden " );

                        
var  index  =  fields.index( this );

                        
if  (index  >   - 1   &&  (index  +   1 <  fields.length) {

                            fields.eq(index 
+   1 ).focus();

                        }

                        
return   false ;

                    }

                });
复制代码

 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

例如: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:一个资金预算审批的例子。

先定义费用类型,和combotree的本地数据源,实际中需要我们从后台输出的。

ExpandedBlockStart.gif
复制代码
< script type = " text/javascript " >

        window.FiannceBudget 
=   new  Array();  // [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前台代码:

ExpandedBlockStart.gif
复制代码
< div >

        
< table style = " width: 100%; "  border = " 1 "  cellpadding = " 0 "  cellspacing = " 0 "  class = " TableStyle " >

            
< thead >

                
< tr >

                    
< td >

                        序号

                    
< / td>

                    
< td >

                        费用类型

                    
< / td>

                    
< td >

                        预算额

                    
< / td>

                    
< td >

                        审批额

                    
< / td>

                    
< td >

                        差补(预算额)

                    
< / td>

                    
< td style = " width: 150px; " >

                        
< a class = " add " >

                            
< img alt = " 增加 "  src = " Image/add.png "  style = " border: 0px; width: 16px; height: 16px "   / >增加< / a >& nbsp; & nbsp;

                        
< a class = " delete "  style = " cursor: hand; " >

                            
< img alt = " 删除 "  src = " Image/delete.png "  style = " border: 0px; width: 16px; height: 16px "   / >删除< / a >

                    
< / td>

                
< / tr>

            
< / thead>

            
< tbody >

                
< asp:Literal ID = " Literal1 "  runat = " server " >< / asp:Literal>

                
< tr fixed = " true "  xmlitem = " total " ><! —汇总列 - à

                    
< td colspan = " 2 "  align = " center "  style = "" >

                        合计:

                    
< / td>

                    
< td >

                        
< input readonly = ' readonly '  type = " text "  id = " totalBudget "  property = ' totalBudget '   / >

                    
< / td>

                    
< td >

                        
< input readonly = ' readonly '  type = " text "  id = " totalReal "  property = ' totalReal '   / >

                    
< / td>

                    
< td >

                        
< input readonly = ' readonly '  type = " text "  id = " totalReduction "  property = ' totalReduction '   / >

                    
< / td>

                    
< td align = " center " >

                    
< / td>

                
< / tr>

            
< / tbody>

        
< / table>

    
< / div>

< asp:HiddenField ID = " HiddenField1 "  runat = " server "   / >

 

Jquery dynamicTable code:

< script type = " text/javascript " >

        $(
function () {

            
var  rowTemplate  =   " <tr > "   +

                    
" <td style='text-align: center;'> "   +

                        
" <label class='rownum' property='SortNum'> "   +

                      
"  </label> "   +

                    
" </td> "   +

                    
" <td> "   +

                        
" <input property='FinanceType'   style=' width:200px;'/> "   +

                    
" </td> "

                    
+

                    
" <td > "   +

                   
" <input readonly='readonly' property='FinanceBudget'>  "   +

                   
"  </td> "   +

         
"  <td> "   +

                     
"  <input type='text' class='number' property='FinanceReal' /> "   +

                   
"  </td> "   +

                   
"  <td > "   +

                     
"  <input readonly='readonly' property='FinanceReduction'>  "   +

                   
"  </td> "   +

                    
" <td align='center' style='width:150px; text-align:center;'><a class='deleterow' style='cursor:hand;'> "   +

                                 
" <img alt='删除' src='Image/delete.png' style='border: 0px; width: 16px; height: 16px' />删除</a></td> "   +

                
" </tr> " ;

            
// 初始化原来页面ComboTree

            
var  ctree  =  $( " :[property='FinanceType'] " );

            ctree.each(
function () {

                $(
this ).combotree({  " onBeforeSelect " function (node) {  if  (node.id  ==   - 1 ) {  return   false ; } },  " onChange " function (newvalue, oldvalue) {

                    $(
this ).val(newvalue).trigger( " change " );

                }

                }).combotree(
" loadData " , TreeSource.slice( 0 ));

 

            });

            
//

            
var  tab  =  $( " 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) {

                        
var  v  =  parseFloat(rowobj.FinanceType);

                        v 
=  window.FiannceBudget[v];

                        $(o).val(v);

                        
var  $FinanceReal  =  $tr.find( " :[property='FinanceReal'] " );

                        
var  v1  =  parseFloat($FinanceReal.val());

                        
if  ( ! isNaN(v1)) {

                            
if  (v1  >  v) {

                                $FinanceReal.val(v);

                                v1 
=  v;

                            }

                        } 
else  {

                            $FinanceReal.val(
0.00 );  //

                            v1 
=   0 ;

                        }

                        
var  b  =  (v  -  v1);

                        
if  (isNaN(b))

                            b 
=   0 ;

                        $tr.find(
" :[property='FinanceReduction'] " ).val(b.toString());

                        $($tr).parent().parent().updateCalculates(); 
// 更新计算

                    }

}]

                    ,

                        addRowed: 
function (arg) {

                            
var  ctree  =  $( " :[property='FinanceType'] " , arg);

                            
var  $FinanceBudget  =  $( " :[property='FinanceBudget'] " , arg);

                            ctree.combotree({ 
" onBeforeSelect " function (node) {  if  (node.id  ==   - 1 ) {  return   false ; } },  " 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();

                } 
else   if  (e.which  ==   190 ) {

                    
if  ($( this ).val().indexOf( " . " !=   - 1 ) {

                        e.stopPropagation();

                        e.preventDefault();

                    }

                }

            });

        });

    
< / script>
复制代码

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

ExpandedBlockStart.gif
复制代码
public   partial   class  dynamicTableDemo1 : System.Web.UI.Page

{

    
private   static  System.Data.DataSet ds;

    
protected   void  Page_Load( object  sender, EventArgs e)

    {

        
if  (IsPostBack)

        {

            

        }

    }

 

    
protected   void  BindTable()

    {

        
if  (ds  !=   null   &&  ds.Tables[ " item " !=   null )

        {

            List
< string >  list  =   new  List < string > ();

            
foreach  (System.Data.DataRow item  in  ds.Tables[ " item " ].Rows)

            {

                list.Add(
string .Format( " <tr > "   +

                    
" <td style='text-align: center;'> "   +

                        
" <label class='rownum' property='SortNum'> "   +

                      
"  </label> "   +

                    
" </td> "   +

                    
" <td> "   +

                        
" <input property='FinanceType'   style=' width:200px;' {0}/> "   +

                    
" </td> "

                    
+

                    
" <td > "   +

                   
" <input readonly='readonly' property='FinanceBudget' {1}>  "   +

                   
"  </td> "   +

         
"  <td> "   +

                     
"  <input type='text' class='number' property='FinanceReal' value='{2}' /> "   +

                   
"  </td> "   +

                   
"  <td > "   +

                     
"  <input readonly='readonly' property='FinanceReduction' value='{3}'>  "   +

                   
"  </td> "   +

                    
" <td align='center' style='width:150px; text-align:center;'><a class='deleterow' style='cursor:hand;'> "   +

                                 
" <img alt='删除' 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());

        }

    }

 

    
protected   void  button1_click( object  sender, EventArgs e)

    {

        var xml 
=  HiddenField1.Value;

        ds 
=   new  System.Data.DataSet();

        ds.ReadXml(
new  System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(xml)));

        BindTable();

    }

}
复制代码

最后在上效果图:

 

 

搜集数据源xml

 

后台数据源:

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

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

插件下载


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2011/04/13/2014621.html


相关文章
|
9月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
44 0
|
10月前
|
JavaScript
jQuery 动态输入文字展示效果
jQuery 动态输入文字展示效果
65 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
22天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
19 1
|
1月前
|
JavaScript
jQuery及highcharts做cpu动态走势图
jQuery及highcharts做cpu动态走势图
18 1
|
24天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
|
2月前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
|
10月前
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
104 0
|
2月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
29 0
|
2月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
70 1