JS表格組件神器bootstraptable詳解（基礎(chǔ)版）_javascript技巧

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:46:52

JS表格組件神器bootstraptable詳解（基礎(chǔ)版）_javascript技巧

JS表格組件神器bootstraptable詳解（基礎(chǔ)版）_javascript技巧:一、Bootstrap Table的引入關(guān)于Bootstrap Table的引入，一般來(lái)說(shuō)還是兩種方法： 1、直接下載源碼，添加到項(xiàng)目里面來(lái)。由于Bootstrap Table是Bootstrap的一個(gè)組件，所以它是依賴(lài)Bootstrap的，我們首先需要添加Bootstrap的引用。 2、使用我們神

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS表格組件神器bootstraptable詳解（基礎(chǔ)版）_javascript技巧:一、Bootstrap Table的引入關(guān)于Bootstrap Table的引入，一般來(lái)說(shuō)還是兩種方法： 1、直接下載源碼，添加到項(xiàng)目里面來(lái)。由于Bootstrap Table是Bootstrap的一個(gè)組件，所以它是依賴(lài)Bootstrap的，我們首先需要添加Bootstrap的引用。 2、使用我們神

一、Bootstrap Table的引入

關(guān)于Bootstrap Table的引入，一般來(lái)說(shuō)還是兩種方法：

1、直接下載源碼，添加到項(xiàng)目里面來(lái)。
由于Bootstrap Table是Bootstrap的一個(gè)組件，所以它是依賴(lài)Bootstrap的，我們首先需要添加Bootstrap的引用。

2、使用我們神奇的Nuget
打開(kāi)Nuget，搜索這兩個(gè)包

Bootstrap已經(jīng)是最新的3.3.5了，我們直接安裝即可。

而B(niǎo)ootstrap Table的版本竟然是0.4，這也太坑爹了。所以博主建議Bootstrap Table的包就直接在源碼里面去下載吧。Bootstrap Table最新的版本好像是1.9.0。

二、代碼詳解
當(dāng)然，組件引用進(jìn)來(lái)了，使用就簡(jiǎn)單了，只不過(guò)這里面涉及很多細(xì)節(jié)需要我們處理，具體我們待會(huì)再說(shuō)，先來(lái)看看使用方法。
1、在cshtml頁(yè)面引用相關(guān)組件，并定義好一個(gè)空的表格。

@{
 Layout = null;
}



 
 BootStrap Table使用
 @*1、Jquery組件引用*@
 
三、問(wèn)題小結(jié)
由于是從零開(kāi)始開(kāi)發(fā)的以上功能，博主遇到一個(gè)問(wèn)題可以和園友們分享一下，這應(yīng)該也是今天這篇想表達(dá)的重點(diǎn)。
1、上面說(shuō)過(guò)，如果在js里面初始化的參數(shù)sidePagination: "server" 設(shè)置為在服務(wù)端分頁(yè)，那么我們的返回值必須告訴前端總記錄的條數(shù)和當(dāng)前頁(yè)的記錄數(shù)，然后前端才知道如何分頁(yè)。并且最重要的一點(diǎn)，這兩個(gè)參數(shù)的名字必須為total和rows。最開(kāi)始也不知道這個(gè)，寫(xiě)成了total和row，結(jié)果是請(qǐng)求可以進(jìn)到后臺(tái)的GetDepartment方法，返回值total和row也都有值，可是前端就是顯示如下：

找了好半天原因。原來(lái)是row寫(xiě)錯(cuò)了，應(yīng)該寫(xiě)成rows。可能這也是前天園友遇到的問(wèn)題的原因。
2、第二個(gè)問(wèn)題就是關(guān)于bootstrap頁(yè)面樣式的問(wèn)題，我們使用過(guò)bootstrap的朋友應(yīng)該知道，它里面所有的圖標(biāo)都是通過(guò)class = "glyphicon glyphicon-plus"這種方式去寫(xiě)的。按要求這樣做了，可是新增、修改、刪除前面的圖標(biāo)怎么都出不來(lái)。如下：

怎么回事呢？然后各種百度，最后發(fā)現(xiàn)原來(lái)是fonts文件夾的問(wèn)題。我們?cè)谛陆ㄒ粋€(gè)MVC項(xiàng)目的時(shí)候，會(huì)自動(dòng)創(chuàng)建一個(gè)fonts文件夾，里面內(nèi)容如下：

而我們的bootstrap.css是放在Content文件夾里面的，這樣就導(dǎo)致找不到這些樣式文件。最終通過(guò)谷歌瀏覽器查看控制臺(tái)

原來(lái)它自動(dòng)去Content里面找fonts文件夾了。這下就好辦了，把我們的fonts文件夾拷貝到Content下不就行了嗎。呵呵，原來(lái)真是這樣，問(wèn)題順利解決。
3、關(guān)于中文。剛開(kāi)始，沒(méi)有引用 
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com