里面已经包括了注释说明，看起来应该不是问题； $.extend(defOption, option); 这段代码意思是吧用户传递进来的参数和插件里面默认的参数合并，用户大于插件直接可以覆盖相同属性的值；
再来，看请求后台的方法：
//请求后台 function ajaxFun(option) { if (option) { $.extend(defOption, option); } //获取分页参数 var hidPageSize = defOption.pageSize; var hidCurrentPage = defOption.currentPage; if ($("form input[name='pageSize']").val()) { hidPageSize = $("form input[name='pageSize']").val(); } if ($("form input[name='currentPage']").val()) { hidCurrentPage = $("form input[name='currentPage']").val(); } //合并用户查询条件和分页参数条件 var searchData = { pageSize: hidPageSize, currentPage: hidCurrentPage }; $.extend(searchData, defOption.data); //请求后台数据 $.ajax({ url: defOption.url, type: "get", data: searchData, dataType: "json", timeout: defOption.timeout, async: true, beforeSend: defOption.befFun, success: defOption.sucFun, }); }
这个方法就是请求接口获取数据的方法，里面默认获取了页面中的pageSize，currentPage两个分页所需要的参数，这里采用的是get方式来请求，当然可以写成post，不过需要后台支持post就行了；
我们再看查询列表方法：
//查询列表 listFun: function (option) { if (option) { $.extend(defOption, option); } //默认格式 var tab = []; tab.push('<table>'); tab.push('<thead><tr role="row">'); for (var i in defOption.headText) { var head = defOption.headText[i]; if (head.colType == "label") { tab.push('<th tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>'); } else if (head.colType == "checkbox") { tab.push('<th rowspan="1" colspan="1" aria-label="">'); tab.push(' <label>'); tab.push(' <input type="checkbox">'); tab.push(' <span>' + head.nickName + '</span>'); tab.push(' </label>'); tab.push('</th>'); } else { tab.push('<th tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>'); } } tab.push('</tr></thead>'); tab.push('<tbody><tr><td colspan="' + defOption.headText.length + '">' + defOption.loading + '</td></tr></tbody>'); tab.push('</table>'); tab.push('<div></div>'); $("#" + defOption.showId).html(tab.join('')); //全选事件 $("input[type='checkbox'][name='cbAll']").on("click", function () { var cbStatus = $(this).is(":checked"); if (cbStatus) { $("input[name='cb']:checkbox").prop("checked", true); } else { $("input[name='cb']:checkbox").prop("checked", false); } }); //数据返回成功处理 defOption.sucFun = function (data) { var head = $("table[id='" + defOption.tabId + "'] tbody"); if (data) { if (data.MoResult) { //遍历table展示的数据 var rows = []; $.each(data.MoResult, function (i, item) { rows.push('<tr>'); var modalHeadText = ""; for (var h_i in defOption.headText) { var head = defOption.headText[h_i]; var item_val = item[head.name]; if (item_val && typeof (item_val) != "undefined") { } else { item_val = ""; } //时间格式化 if (head.format && item_val.length > 0) { console.log(item_val); var date = new Date(parseInt(item_val.replace("/Date(", "").replace(")/", ""), 10)); item_val = head.format. replace("yyyy", date.getFullYear()). replace("MM", date.getMonth() + 1). replace("dd", date.getDate()). replace("HH", date.getHours()). replace("mm", date.getMinutes()). replace("ss", date.getMilliseconds()); } //获取模式窗体头部信息 if (modalHeadText.length <= 0) { modalHeadText = head.isModalHeadText ? item_val : "" }; if (head.colType == "label") { rows.push('<td>' + item_val + '</td>'); } else if (head.colType == "checkbox") { rows.push('<td>'); rows.push(' <label>'); rows.push(' <input type="checkbox" value="' + item_val + '">'); rows.push(' <span></span>'); rows.push(' </label>'); rows.push('</td>'); } else if (head.colType == "operate") { rows.push('<td><div>'); if (defOption.editeOption.url.length > 0) { var editOption = $.extend({}, defOption.editeOption); editOption.url += "https://www.jb51.net/" + item_val; editOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(editOption); rows.push('<a data-item=\'' + op + '\' href="javascript:;"><i></i></a>'); } if (defOption.viewOption.url.length > 0) { var viewOption = $.extend({}, defOption.viewOption); viewOption.url += "https://www.jb51.net/" + item_val; viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(viewOption); rows.push('<a data-item=\'' + op + '\' href="javascript:;"><i></i></a>'); } if (defOption.delOption.url.length > 0) { var delOption = $.extend({}, defOption.delOption); delOption.url += "https://www.jb51.net/" + item_val; delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(delOption); rows.push('<a data-item=\'' + op + '\' href="javascript:;"><i></i></a>'); } rows.push('</div></td>'); } else { rows.push('<td>' + item_val + '</td>'); } } rows.push('</tr>'); }); //页数展示 if (data.MoResult.length > 0) { var pager = []; pager.push('<div>'); pager.push(' <ul>'); var nPager = defOption.showPageTab;//每次展示6个分页 //上一页 var nprev = (data.CurrentPage - 1 >= 1 ? data.CurrentPage - 1 : 1); pager.push(' <li aria-controls="dynamic-table" tabindex="0">'); pager.push(' <a href="javascript:;" data-page="' + nprev + '">上一页</a>'); pager.push(' </li>'); //当前页之前页码 var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1; for (var i = preTotal; i < data.CurrentPage ; i++) { pager.push(' <liactive disabled" : "") + '" aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" data-page="' + i + '">' + i + '</a>'); pager.push(' </li>'); } //当前页 pager.push(' <li aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" data-page="' + data.CurrentPage + '">' + data.CurrentPage + '</a>'); pager.push(' </li>'); //当前页以后页码 var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager; for (var i = data.CurrentPage + 1; i <= nextTotal; i++) { pager.push(' <liactive disabled" : "") + '" aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" data-page="' + i + '">' + i + '</a>'); pager.push(' </li>'); } //下一页 var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1); pager.push(' <li aria-controls="dynamic-table" tabindex="0">'); pager.push(' <a href="javascript:;" data-page="' + nnext + '">下一页</a>'); pager.push(' </li>'); pager.push(' </ul>'); //分页查询条件 pager.push('<div>'); pager.push(' <form>'); pager.push(' <input type="hidden" value="' + defOption.pageSize + '"/>'); pager.push(' <input type="hidden" value="' + defOption.currentPage + '"/>'); pager.push(' </form>'); pager.push('</div>'); pager.push('</div>'); //移除加载中 //head.html(""); //添加结果 head.html(rows.join('')); $("div[id='divPager']").html(pager.join('')); //操作按钮事件 $("a[data-item]").on("click", function () { var data_Item = $(this).attr("data-item"); if (data_Item) { var data_Item_Obj = JSON.parse(data_Item); defOption.modalExt.modalFun({ width: data_Item_Obj.width, height: data_Item_Obj.height, url: data_Item_Obj.url, title: data_Item_Obj.title, callback: defOption.callback }); } }); //绑定分页按钮事件 $("a[name='npager']").on("click", function () { var nPager = $(this).attr("data-page"); if (nPager.length <= 0) { return; } $("form input[name='currentPage']").val(nPager); //执行请求后台 ajaxFun(defOption); }); } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据！</td></tr>"); $("div[id='divPager']").html(""); } } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据。</td></tr>"); $("div[id='divPager']").html(""); } } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据</td></tr>"); $("div[id='divPager']").html(""); } }; if (option) { $.extend(defOption, option); } //执行请求后台 ajaxFun(defOption); }
这个方法体挺长的，主要操作是：
默认格式展示列表头部并呈现出加载中的提示=》绑定复选框全选事件=》创建数据返回成功函数sucFun()=》调用请求后台方法ajaxFun()；
再来看函数sucFun()等到数据返回后执行的操作是：