前端開發(fā)：非常好用的 JavaScript 表格控件

此文為大家整理出幾款非常好用的JavaScript 表格控件分享給大家，希望對大家有所幫助！

1.Handsontable（用純JavaScript，也可與 AngularJS指令和聚合物組成。）

2.JsGrid（基于jQuery的輕量級客戶端數(shù)據(jù)網(wǎng)格控件。它支持基本的網(wǎng)格操作，如插入、過濾、編輯、刪除、分頁和排序。jsgrid是靈活的，允許自定義其外觀和部件。）

3.FancyGrid（一個(gè)插件的免費(fèi)圖書館，它沒有依賴但jQuery和AngularJS集成。fancygrid還包括樣品數(shù)量、專業(yè)支持、優(yōu)雅的API，當(dāng)然詳細(xì)的文件，方便使用。）

4.jqGrid（是一個(gè)支持Ajax的JavaScript控件，它提供了在Web上表示和操作表格數(shù)據(jù)的解決方案。）

5.W2ui（圖書館一體化解決方案。它包含所有最常見的UI小部件：布局、網(wǎng)格、邊欄、制表符、工具欄、彈出框、字段控件和窗體。你不需要拼湊一個(gè)不匹配的插件來完成你的目標(biāo)。）

6.dhtmlxGrid（一個(gè)功能全面的JavaScript網(wǎng)格控件，它提供了尖端的功能、強(qiáng)大的數(shù)據(jù)綁定和大數(shù)據(jù)集的快速性能。豐富而直觀的JavaScript API使網(wǎng)格具有高度的可定制性和易用性。）

7.jQWidgets（是一個(gè)專業(yè)的觸摸功能完整的框架使jQuery插件、主題、輸入驗(yàn)證、拖放插件，數(shù)據(jù)適配器，內(nèi)置WAI-ARIA可達(dá)性、國際化和MVVM支持。）

切版 qieban(.cn)

一節(jié)我們實(shí)現(xiàn)了分類樹的右鍵菜單彈出，本節(jié)我們繼續(xù)實(shí)現(xiàn)數(shù)據(jù)從瀏覽器到數(shù)據(jù)庫的工作。

完善菜單內(nèi)容

我們先來豐富右鍵菜單的選項(xiàng)，在Menu控件中添加MenuItem，分別是修改節(jié)點(diǎn)和刪除節(jié)點(diǎn)：

<Menu Style="@menuStyle">
???????<MenuItem OnClick="CreateNode">
???????????@menu_create_text
???????</MenuItem>
???????<MenuItem OnClick="ModifyNode">
???????????修改節(jié)點(diǎn)
???????</MenuItem>
???????<MenuItem OnClick="DeleteNode">
???????????刪除節(jié)點(diǎn)
???????</MenuItem>
???</Menu>

由于修改和刪除不像創(chuàng)建涉及到不同的名稱，所以菜單文章內(nèi)容直接寫死。事件響應(yīng)代碼一并復(fù)制就好。

void ModifyNode(MouseEventArgs args)
{
menuStyle = "display:none;";
}

void DeleteNode(MouseEventArgs args)
{
menuStyle = "display:none;";
}

運(yùn)行效果：

創(chuàng)建分類編輯組件

我們的右鍵菜單現(xiàn)在有了事件觸發(fā)，接下來要彈出分類編輯頁面來錄入信息。我們首先需要?jiǎng)?chuàng)建一個(gè)名為CategoryEdit.Razor組件，過程跟上一節(jié)我們創(chuàng)建ContextMenuPanel一樣。如下圖：

這個(gè)過程我們以后就不再講了。

有同學(xué)私信問不使用Ant Design組件，直接用Blazor系統(tǒng)的組件可行嗎？我覺得這個(gè)問題比較有代表性，所以這個(gè)CategoryEdit我就不使用Ant Design的組件來完成。先上完整的代碼吧：

<div style="width:100%; display:@display;">
<div class="page">
<div @onclick="toggle" id="close">X</div>
<div style="padding: 10px;">
<ul>
<li class="item"><span>編碼：</span><input @bind="@Value.Id" /></li>
???????????????<li class="item"><span>名稱：</span><input @bind="@Value.Name" /></li>
???????????????<li class="item"><span>所屬Id：</span><input @bind="@Value.ParentId" /></li>
???????????</ul>
???????????<ul>
???????????????<li class="item">
???????????????????<span>是否有子類：</span>
???????????????????<select @bind="@has_child">
???????????????????????<option value="1">true</option>
???????????????????????<option value="0">false</option>
???????????????????</select>
???????????????</li>
???????????????<li class="item"><span>分類類型：</span><input @bind="@Value.Type" /></li>
???????????????<li class="item"><span>顯示順序：</span><input @bind="@Value.ShowOrder" /></li>
???????????</ul>
???????????<div>
???????????????<label>分類描述：</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Description></textarea>
???????????????<label>備注：</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Remark></textarea>
???????????</div>
???????????<button @onclick="save">保存</button>
???????</div>
???</div>
</div>

@code {
???string display = "none";

???public void toggle()
???{
???????display = (display == "none") ? "block" : "none";
???}

???[Parameter]
???public EventCallback OnSave { get; set; }

???[Parameter]
???public Model.Category Value { get; set; }

???int has_child = 0;
???void save()
???{
???????Value.HasChild = (has_child == 0) ? false : true;
???????if (OnSave.HasDelegate) OnSave.InvokeAsync();
???}
}

樣式文件CategoryEdit.razor.css

.page { width:960px; border: 1px solid #CCC; margin-left:auto; margin-right:auto; }
.item { width: 280px; list-style:none; display: inline-block; }
.item span { width: 100px; display: inline-block; }
#close {
    position: relative;
    text-align: center;
    cursor: pointer;
    background: #FCC;
    float: right;
    width: 20px;
    height: 20px;
}
    #close:hover {
        background-color: #F00;
    }

上部分為html元素標(biāo)簽，具體標(biāo)簽和布局就不展開講了。

@display是引用下面code中的變量，只要display的值變化，這里就會隨之生效；

@onclick是綁定click事件；用到了兩處，一個(gè)是右上角的關(guān)閉按鈕，一個(gè)是下方的保存按鈕；

@bind="@Value.Id跟上面的@display類似，只是這個(gè)用于控件，控件的值與變量值雙向綁定；

public void toggle()是切換是否顯示的方法，默認(rèn)隱藏，調(diào)用一次就切換一次；

[Parameter]是定義CategoryEdit組件的屬性；

public EventCallback OnSave是聲明一個(gè)OnSave的函數(shù)作為回調(diào)；

public Model.Category Value是要編輯或新建的Category數(shù)據(jù)實(shí)體；

int has_child是對應(yīng)Model.Category中的HasChild，在標(biāo)準(zhǔn)select及option中無法直接綁定bool類型的熟知，所以用has_child來作為媒介；

void save()則是保存函數(shù)，做數(shù)據(jù)處理后回調(diào)OnSave；

css文件在blazor中是隔離的，即聲明一個(gè)跟razor組件同名的css文件，它就會從屬于這個(gè)razor組件，只對這個(gè)razor生效，這樣可以很好的解決不同css文件命名相互沖突的問題。

上面完全都是靠代碼堆的，這里有點(diǎn)沒想明白為什么微軟不延續(xù)winform、webform的所見即所得的方式，哪怕是有個(gè)設(shè)計(jì)視圖瀏覽也好。難道是技術(shù)上過于復(fù)雜嗎？目前以Blazor這種開發(fā)方式，想要看到修改效果，哪怕是只調(diào)一個(gè)顏色，都只能重新編譯運(yùn)行才能看到效果，非常影響開發(fā)效率。以前webform的那種，改前端根本需要編譯，重新刷新頁面就好。希望這里未來能有改進(jìn)。

調(diào)用分類編輯組件

CategoryEdit組件設(shè)計(jì)完成后，我們就可以在Index.razor中使用它了

<CategoryEdit @ref="categoryEditor" Value="@curCategory" OnSave="@SaveCategory"></CategoryEdit>
@code {
CategoryEdit categoryEditor;
Model.Category curCategory = new Model.Category();
void SaveCategory()
{
}
}

我們只需要這幾行代碼就夠了。對屬性賦值，響應(yīng)事件。然后我們先來看下效果：

我們可以看到，調(diào)用完成后，在Index.razor中的SaveCategory函數(shù)中，curCategory中的值就都有了。實(shí)際上我們用的控件庫，比如Ant Design也都是這樣一步一步來完成的，只要有時(shí)間、有耐心，啥都不是事。

到目前為止，我們已經(jīng)完成了前端的數(shù)據(jù)準(zhǔn)備，接下來我們就是要通過WebAPI正式向服務(wù)器提交信息了。在一般的公司中，前端和后端都是分開不同團(tuán)隊(duì)來做的，后端做完提供接口，前端按照接口規(guī)范進(jìn)行調(diào)用。那我們接下來的事情就是要做后端的工作了，考慮到同樣編碼內(nèi)容較多，這節(jié)暫時(shí)到這里，我們下節(jié)繼續(xù)。

----------------------------------------------------

本教程項(xiàng)目源碼已作為開源項(xiàng)目加入到Gitee，代碼內(nèi)容會隨教程實(shí)時(shí)更新，大家有興趣的話可以關(guān)注我，以獲得最及時(shí)的更新。私信：

私人日記 可以獲取相關(guān)鏈接；

大家閱讀過程中有哪些看不懂或未盡興的地方，可以在評論區(qū)留言，我會先記下來在后續(xù)的教程中找機(jī)會再說。

教程有幫助的話請大家?guī)兔﹃P(guān)注、轉(zhuǎn)發(fā)、擴(kuò)散，能不能開專欄還需要你們的支持！

頁編程之圖片、隱藏。

同學(xué)們好，這里是免費(fèi)少兒編程知識分享，每天一行代碼誰都能學(xué)會。今天分享的知識是為網(wǎng)頁添加圖片控件和隱藏控件，用到的是input標(biāo)簽的type屬性值，image和hidden。這兩個(gè)控件太過于簡單，所以我就放在一起講了，同時(shí)介紹了image控件button的image內(nèi)容，以及IMG控件之間的區(qū)別。演示了hidden控件在實(shí)際編程中的作用。

先來看看今天實(shí)例的運(yùn)行效果。網(wǎng)頁上分為兩段。

·第一段中有三張圖片，第一張就是type屬性等于image的效果，第二張是button中包含IMG標(biāo)簽的效果，第三張是純IMG標(biāo)簽的效果。這三張圖片的共同點(diǎn)是圖片完全一致。不同點(diǎn)是type=image，直接將整張圖片做成了提交按鈕，點(diǎn)擊之后即可提交整張表單，但外觀表現(xiàn)時(shí)仍然和普通的圖片是沒有任何差別的。

·第二張是button按鈕中使用了IMG標(biāo)簽，雖然它也有提交和圖片，但是它最外面仍然保留了按鈕的外邊框，看上去是以按鈕為主。

·第三章中直接使用IMG標(biāo)簽，它沒有提交功能就是一普通的圖片，但是我們?nèi)匀豢梢酝ㄟ^JS的submit函數(shù)來使其提交表單。

·第二段是一個(gè)密碼框一個(gè)提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置，我還做了兩個(gè)hidden的隱藏控件，但是你們看不到，我隨便在這里輸入密碼，然后點(diǎn)擊按鈕時(shí)，JS就會取出(密碼)控件的值和隱藏控件中的值并且彈出對話框提示。

這里有兩點(diǎn)需要注意，可以看到密碼控件中的值在這里仍然是明文顯示的，證明它只是視覺上是*或者圓點(diǎn)，實(shí)際在數(shù)據(jù)傳輸中仍然是明文并沒有加密。

·第二點(diǎn)是隱藏控件中的值被成功讀取，看不到并不代表不存在，效果各位同學(xué)都已經(jīng)看到了。

在我們來看看實(shí)現(xiàn)的代碼，先講image值，它的關(guān)鍵屬性就是src和ID，也就是引用地址和命名，沒有什么好講的。我其實(shí)是不建議你們使用這個(gè)控件的，因?yàn)橐话惚韱翁峤磺埃紩由弦粚右粚拥尿?yàn)證，比如說是必填、b7手勢、數(shù)字、格式是否正確。這個(gè)時(shí)候除了最基礎(chǔ)的控件類型驗(yàn)證外還會用到 gs驗(yàn)證。而如果使用 gs驗(yàn)證就需要用到自定義函數(shù)，在提交到服務(wù)器前就驗(yàn)證好。

如果用戶數(shù)據(jù)是正確的就提交，如果不正確就終止提交操作提示用戶修改流程，這樣看上去沒有問題，但因image控件討厭也就討厭在這里。

·若用這種方式提交可能會發(fā)生表單提交兩次的現(xiàn)象，經(jīng)常會造成表單元素被重復(fù)提交，數(shù)據(jù)庫被寫入異常，所以盡量不用或者少用。

·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數(shù)據(jù)，他的常用屬性就是無這個(gè)Value和這個(gè)id。

我舉個(gè)例子幫助你們理解，現(xiàn)在客戶要求建立一個(gè)注冊新用戶的界面，但是要求將注冊步驟分為兩步。第一步，需要用戶填寫手機(jī)和昵稱，然后跳轉(zhuǎn)至第二頁，輸入密碼和其他的信息，第二頁肯定就不需要顯示出來用戶在第一頁的時(shí)候輸入的數(shù)據(jù)了。但這些數(shù)據(jù)又必須在第二頁的時(shí)候一起提交至服務(wù)器。

這時(shí)候就可以使用到隱藏控件--接收第一頁提交過來的數(shù)據(jù)并且不顯示，用戶也感受不到。直接填好信息提交時(shí)第一頁的數(shù)據(jù)也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個(gè)使用場景，還可以收集用戶信息、確定用戶身份、判斷提交源，在多個(gè)form表單中建立關(guān)節(jié)聯(lián)、做全局變量等，總的來說應(yīng)用方式還是很廣的。

在目前這個(gè)階段就只需要知道這兩控件能干什么和基礎(chǔ)寫法，計(jì)算完成后面到具體的使用場景時(shí)會再詳細(xì)講解。

好了，今天的分享就到這里，希望各位同學(xué)下去能夠照著寫三遍，做到不看視頻也能夠?qū)懗鰜恚械陌咐跋嚓P(guān)文檔均可以向我獲取。下期見。網(wǎng)頁編程·服務(wù)端編程·數(shù)據(jù)庫·算法，點(diǎn)贊點(diǎn)關(guān)注吧！

在線咨詢

上一篇：如何將 JavaScript 代碼添加到網(wǎng)頁中，以及 script 標(biāo)簽的屬性
下一篇：小猿圈教你用jQuery做個(gè)返回頂部按鈕

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端開發(fā)：非常好用的 JavaScript 表格控件

完善菜單內(nèi)容

創(chuàng)建分類編輯組件

調(diào)用分類編輯組件

您的項(xiàng)目需求