Question

今天我正在学习＆＃34;如何在jQuery中创建插件＆＃34;

我有一个包含大量列的表我最初将display none设置为所有列，并设置用户可见的有限列数。并提供下一个和上一个按钮，以显示下一列和上一列。

我想在点击下一个和上一个按钮时调用插件的SetColumns_ColumnPagingTable()功能。

我怎样才能实现它。请帮助。

先谢谢。

请注意：现在两个按钮都是静态放置的。将来我会动态创建它们。我的jsfiddle链接 - http://jsfiddle.net/saurabh29/Legh6re1/

Answer 1

试试这个。更新的小提琴 https://jsfiddle.net/Legh6re1/4/ 如果您将来要动态创建“上一个”和“下一个”按钮。然后您可以在SetColumns_ColumnPagingTable中移动代码以单击这些按钮的事件。

     (function ($) {$.fn.ColumnPagingTable = function (options) {
                   ....
                   ....


var previousButton=$("<input />", { id: "btnNext_ColumnPagingTable",value: "Previous" ,type:"button"});
                previousButton.click(function() {

                        var rows = document.getElementById('myTable').rows;
                        var pointer = 0;
                        for (var row = 0; pointer < rows.length; row++, pointer++) {
                            var cols = rows[pointer].cells;
                            cols[endVisibleIndex].style.display = false ? '' : 'none';
                            cols[startVisibleIndex - 1].style.display = true ? '' : 'none';
                            endVisibleIndex--;
                            startVisibleIndex--;

                        }

                    });
 $(this).parent().append(previousButton);

Answer 2

您可以将jquery插件代码保存在某个.js文件中，让我们说jQuery-custom-plugin.js并使用<script></script>标记将其添加到您的jquery库插件下方。

见下文

<script src="/<your path upto js file>/jquery-1.11.0.js"></script>
<script src="/<your path upto js file>/jQuery-custom-plugin.js"></script>

注意 - 此处<your path upto js file>是直到js文件的实际路径。

然后调用document.ready中的插件函数，如下所示

$(document).ready(function () {
   myTableReference= $("#myTable").ColumnPagingTable({
           showColumns: 5
   });
});

从外部调用jquery插件函数

2 个答案: