Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫(kù)。

Kendo UI通過(guò)繼承基本窗口小部件類(lèi)為您提供創(chuàng)建自定義窗口小部件的選項(xiàng)。

處理事件

1. 將更改事件綁定到您的數(shù)據(jù)源并處理它。在這里您可以根據(jù)從數(shù)據(jù)源讀取的數(shù)據(jù)來(lái)更改DOM，通常這是通過(guò)刷新方法完成的。將其公開(kāi)，以便您或其他人能夠在初始化后的某個(gè)時(shí)刻在小部件上調(diào)用它。

// Bind to the change event to refresh thewidget.
that.dataSource.bind("change", function() {
that.refresh();
});

下面的示例演示了小部件代碼的外觀。請(qǐng)注意，當(dāng)您綁定到數(shù)據(jù)源上的change事件時(shí)，實(shí)際上是綁定到字符串值“ change”。更好的做法是在小部件頂部將它們分配為常量，然后引用該常量，整個(gè)DataSource配置也移到自己的方法中。這是因?yàn)閠hat表示窗口小部件，因?yàn)閠hat是調(diào)用對(duì)象。您可以將that分配給this對(duì)象后，引用that對(duì)象的所有窗口小部件屬性。

(function($) {

var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
CHANGE = "change";

var Repeater = kendo.ui.Widget.extend({
init: function(element, options) {
var that = this;
kendo.ui.Widget.fn.init.call(that, element, options);
// initialize or create dataSource
that._dataSource();
},
options: {
name: "Repeater"
},
_dataSource: function() {
var that = this;
// returns the datasource OR creates one if using an array or a configuration
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget
that.dataSource.bind(CHANGE, function() {
that.refresh();
});
}
});

kendo.ui.plugin(Repeater);

})(jQuery);
–_–>

2. 通過(guò)檢查that.options的autoBind配置值從數(shù)據(jù)源獲取(如有必要)，然后調(diào)用that.dataSource.fetch()。請(qǐng)注意fetch和read不同，因?yàn)閮H當(dāng)尚未從DataSource讀取數(shù)據(jù)時(shí)，它才會(huì)填充DataSource。如果在初始化小部件之前在DataSource上調(diào)用了read，則不要使DataSource再次讀取。

_dataSource: function() {
var that = this;

// Returns the datasource OR creates one ifusing array or configuration.
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget.
that.dataSource.bind(CHANGE, function() {
that.refresh();
});

// Trigger read on the dataSource if onehas not happened yet.
if (that.options.autoBind) {
that.dataSource.fetch();
}
}

3. 將autoBind配置添加到小部件上的options對(duì)象，并將其默認(rèn)值設(shè)置為true。 Kendo UI中的所有數(shù)據(jù)綁定窗口小部件在默認(rèn)情況下都自動(dòng)綁定。

options: {
name: "Repeater",
autoBind: true
}

帶有模板的渲染小部件

1. 小部件輸出的HTML會(huì)在Kendo UI模板上呈現(xiàn)，它們?cè)试S您預(yù)編譯HTML并將經(jīng)過(guò)評(píng)估的數(shù)據(jù)或表達(dá)式注入HTML中，并且DOM片段作為HTML字符串返回。Kendo UI中幾乎所有的小部件都允許您指定除小部件使用的默認(rèn)模板之外的某種模板，為此首先將模板添加到options對(duì)象，并將其值設(shè)置為空字符串。與其他配置設(shè)置相反，請(qǐng)勿在此處設(shè)置其默認(rèn)值。

options: {
name: "Repeater",
autoBind: true,
template: ""
}

2. 通過(guò)直接在基本小部件初始化的調(diào)用下添加一行來(lái)設(shè)置默認(rèn)值，這將預(yù)編譯用戶(hù)傳入的模板，或使用默認(rèn)模板。對(duì)于此Repeater，寫(xiě)出封裝在段落中strong標(biāo)簽，然后引用數(shù)據(jù)對(duì)象。如果我們傳遞字符串?dāng)?shù)組，則該數(shù)據(jù)對(duì)象將是一個(gè)字符串。如果將對(duì)象傳遞給模板，則默認(rèn)模板將呈現(xiàn)[objectObject]。

that.template =kendo.template(that.options.template || "

#= data #

")

實(shí)施刷新功能

1. 由于綁定到change方法，因此需要實(shí)現(xiàn)在數(shù)據(jù)源更改或直接調(diào)用時(shí)將調(diào)用的refresh公共函數(shù)。在refresh方法內(nèi)部，您將要更改DOM。首先調(diào)用that.dataSource.view()，它將為您提供來(lái)自DataSource的數(shù)據(jù)；接下來(lái)使用kendoRender并將模板與DataSource data—a.k.a.視圖一起傳遞，Kendo UI窗口小部件就是這樣改變DOM的。render方法將數(shù)據(jù)應(yīng)用于DataSource并返回HTML字符串。

refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);
}

2. 設(shè)置that.element的HTML —在其上初始化小部件的元素。如果要處理輸入的初始化，并且想用容器轉(zhuǎn)換或包裝該輸入，請(qǐng)?jiān)谠O(shè)置HTML之前在此處添加該邏輯。that.element是jQuery包裝的元素，因此您可以直接從其中調(diào)用html方法。最終的刷新方法類(lèi)似于下面示例中演示的方法。

refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);

that.element.html(html);
}

3. 在上一步中添加了最后的修飾后，現(xiàn)在您有一個(gè)完全數(shù)據(jù)綁定的小部件。以下示例演示了Repeater小部件的完整代碼。

(function() {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,

CHANGE = "change";

var Repeater = Widget.extend({
init: function(element, options) {
var that = this;

kendo.ui.Widget.fn.init.call(that, element,options);
that.template = kendo.template(that.options.template ||"

#= data #

");

that._dataSource();
},
options: {
name: "Repeater",
autoBind: true,
template: ""
},
refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);

that.element.html(html);
},
_dataSource: function() {
var that = this;
// Returns the datasource OR creates one if using array or configurationobject.
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

// Bind to the change event to refresh thewidget.
that.dataSource.bind(CHANGE, function() {
that.refresh();
});

if (that.options.autoBind) {
that.dataSource.fetch();
}
}
});

ui.plugin(Repeater);

})(jQuery);

以下示例使用兩個(gè)已初始化的窗口小部件。第一個(gè)將簡(jiǎn)單數(shù)組作為數(shù)據(jù)源；第二個(gè)使用遠(yuǎn)程端點(diǎn)、模板和聲明式初始化。

#= data.ProductName #

公司名稱(chēng)：北京哲想軟件有限公司

北京哲想軟件官方網(wǎng)站：cogitosoft.com

北京哲想軟件微信公眾平臺(tái)賬號(hào)：cogitosoftware

北京哲想軟件微博：哲想軟件

北京哲想軟件郵箱：sales@cogitosoft.com

銷(xiāo)售(俞先生)聯(lián)系方式：+86(010)68421378

微信：18610247936 ? ? QQ：368531638

總結(jié)

以上是生活随笔為你收集整理的html使用element ui_Kendo UI for jQuery使用教程：自定义小部件（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。