你的位置:首页 > Java教程

[Java教程]jquery插件方式实现table查询功能


1.写插件部分,如下:

;(function($){

  $.fn.plugin = function(options){

    var defaults = {

      //各种属性,各种参数

    }

    var options = $.extend(defaults, options);

     this.each(function(){

      //功能代码

      var _this = this;

    });

  }

})(jQuery);

附上一个例子:

 1 ;(function($){ 2   $.fn.table = function(options){ 3   var defaults = { 4       //arguments , properties 5       evenRowClass : 'evenRow', 6       oddRowClass : 'oddRow', 7       currentRowClass : 'currentRow', 8       eventType : 'mouseover', 9       eventType2 : 'mouseout',10     }  11     var options = $.extend(defaults, options);12 13     this.each(function(){14 15       //function code16       var _this = $(this);17       //even row18       _this.find('tr:even:not("#thead")').addClass(options.evenRowClass);19       //_this.find('#thead').removeClass(options.evenRowClass);20       // odd row 21       _this.find('tr:odd').addClass(options.oddRowClass);22 23       /*_this.find('tr').mouseover(function(){24         $(this).addClass(options.currentRowClass);25       }).mouseout(function(){26         $(this).removeClass(options.currentRowClass);27       });*/28 29       _this.find('tr').bind(options.eventType, function(){30         $(this).addClass(options.currentRowClass);31       });32 33       _this.find('tr').bind(options.eventType2, function(){34         $(this).removeClass(options.currentRowClass);35       });36 37     });38     return this;39   }40 })(jQuery);

html部分调用插件如下:
$();==$(function(){});==$(document).ready(); 等页面加载成功后执行

;$(function(){

  $('#table1').table({
   
    //arguments , properties
    evenRowClass : 'evenRow1',
    oddRowClass : 'oddRow1',
    currentRowClass : 'currentRow1' 
 });

});

附上代码:

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4  <meta charset="UTF-8"> 5  <meta name="Generator" content="EditPlus®"> 6  <meta name="Author" content=""> 7  <meta name="Keywords" content=""> 8  <meta name="Description" content=""> 9  <title>Document</title> 10  <style> 11   *{margin:0; padding:0;} 12   table{ 13     border-collapse:collapse; 14     width:100%; 15     border:1px solid red; 16     margin-top:50px; 17     text-align:center; 18   }  19    20   tr, th, td{ 21     height:30px; 22     border:1px solid red; 23   } 24   .evenRow1{ 25     background:red; 26   } 27   .oddRow1{ 28     background:orange; 29   } 30   .currentRow1{ 31     background:blue; 32   } 33   #ss{ 34     float:right; 35     margin-right:100px; 36   } 37   #search{ 38     font-size:14px; 39     width:50px; 40   } 41  42  </style> 43     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 44   <script src="jquery-table-1.0.js"></script> 45 </head> 46 <body> 47 <script> 48 ;$(function(){ 49   $('#table1').table({ 50        51     //arguments , properties 52     evenRowClass : 'evenRow1', 53     oddRowClass : 'oddRow1', 54     currentRowClass : 'currentRow1'   55      56   }); 57  58   $('input[type=button]').click(function(){ 59       var text = $('input[type=text]').val(); 60       $('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show(); 61     }); 62  63   }); 64  65 </script> 66  67  <div id="ss"> 68  <input type="text" placeholder="请输入查询数据"> 69  <input id="search" type="button" value="查询"> 70  </div> 71  72  <table id="table1"> 73   <tr id="thead"> 74     <th>姓名</th> 75     <th>学号</th> 76     <th>性别</th> 77     <th>年龄</th> 78  79   </tr> 80   <tr> 81     <td>张三</td> 82     <td>1</td> 83     <td>男</td> 84     <td>20</td> 85   </tr> 86  87   <tr> 88     <td>李四</td> 89     <td>2</td> 90     <td>男</td> 91     <td>30</td> 92   </tr> 93   <tr> 94     <td>张三</td> 95     <td>1</td> 96     <td>女</td> 97     <td>20</td> 98   </tr> 99 100   <tr>101     <td>李四</td>102     <td>2</td>103     <td>男</td>104     <td>30</td>105   </tr>106   <tr>107     <td>王五</td>108     <td>3</td>109     <td>男</td>110     <td>30</td>111   </tr>112   <tr>113     <td>王五</td>114     <td>3</td>115     <td>男</td>116     <td>30</td>117   </tr>118   <tr>119     <td>张三</td>120     <td>1</td>121     <td>女</td>122     <td>20</td>123   </tr>124 125   <tr>126     <td>李四</td>127     <td>2</td>128     <td>男</td>129     <td>30</td>130   </tr>131 132  </table>133 </body>134 </html>

通过这个例子学到了jquery 对象级插件开发