最終想實現的效果如下
需要明白的兩件事
一.搜索的邏輯
1.首先增加一個搜索a標簽,class命名為chongzhi
2.熟悉搜索的邏輯,所有的tab,所有的jstree都是,通過給通用搜索,傳遞值,才引起了下面表格的變化.
3.我把js代碼寫在了backend.js的init里,類似於寫在原型上,這樣很多模塊的js都能使用
// 新增重置搜索
$('.chongzhi').click(function(){
$('button[type=reset]').trigger('click')
})
二.彈窗的邏輯
首先熟悉 require-table.js,把代碼折疊起來,這樣更方便鳥瞰整個js
查看整個JS發現,其實,整個是對象的方式,存儲了一些函數。並且是分類存儲,這樣讓整個JS顯的十分有序。
那么!我們猜一猜,追加,刪除的按鈕,在哪個大類中呢?
1.在button里?按道理,追加和刪除,都是按鈕,相關的點擊事件,應該寫在按鈕類里才對
點開發現,不對
2.在events里?按道理,追加和刪除,都是表格的事件
但是點開發現,還是不對
3.最后發現,是在api的bindevent里,events和bindevent兩者的區別,也在圖片的注釋上
4.最終找到添加的js事件
// 添加按鈕事件
$(toolbar).on('click', Table.config.addbtn, function () {
var ids = Table.api.selectedids(table);
var url = options.extend.add_url;
if (url.indexOf("{ids}") !== -1) {
url = Table.api.replaceurl(url, {ids: ids.length > 0 ? ids.join(",") : 0}, table);
}
Fast.api.open(url, __('Add'), $(this).data() || {});
});
5.添加的彈窗分析
Table.api.replaceurl
這個是當前js文件中自定義的一個js方法
Fast.api.open
看來是使用了fast.api.open方法,進行了彈窗,據說這個方法,是在layui基礎上升級的一個彈窗發。顯然,這個方法接收3個參數。
那么fast這個js大類在哪里呢?
是寫在了原型上了嗎,打印看一下。果然
但是,為什么要寫在原型上,又是怎么寫在原型上的呢?或者,這個fast的js文件位置在哪呢?
這個函數寫在了,3個參數的意思,也很明顯了