jTemplates jquery資料繫結控制項

2022-09-11 00:36:31 字數 2616 閱讀 8665

jtemplates是乙個基於jquery的模板引擎外掛程式,功能強大,有了他你就再不用為使用js繫結資料集時發愁了。

在使用jtemplates時最好先定義好模板,你可以把它放在textarea文字框裡如:

這樣就定了乙個簡單的模板,下面再進行模板資料的定義:

var mydata = ;

定義模板顯示容器:

通過簡單的兩行**就可以完成模板的執行工作:

$("#result1").settemplateelement("txttemplate");

$("#result1").processtemplate(mydata);

顯示結果:

hello anne.

如何?是不是很簡單方便且實用!

別急,這只是jtemplates強大功能的冰山一角。

jtemplates包含三個預定全域性變數,分別是$t、$p、$q。$t為模板提供資料呼叫功能,$p為模板提供引數變數呼叫功能,$q.version提供當前jtemplate的版本

下面介紹將會用到這些功能。

jtemplates還支援#if、#for、#cycle、#foreach、#include、#param標籤,幫助你處理實現複雜的業務情形。

#if 語法:

......

#if 示例:

hello world.

good fail

**了 未成年

system list users list errors list

#for 語法:

....

....

#for 示例:

預設步長:

正向步長:

負向步長及空迴圈: nothing

也可以在迴圈中使用變數:

說明:是在未能執行的時的輸出內容。

#foreach 語法:

....

#foreach 示例:

預設:

指定起始位置:

指定起始和迴圈次數:

指定步長:

#foreach 內定環境變數:

$index - index of element in table

$iteration - id of iteration (next number begin from 0)

$first - is first iteration?

$last - is last iteration?

$total - total number of iterations

$key - key in object (name of element) (0.6.0+)

$typeof - type of element (0.6.0+)

#foreach 示例所需要的資料:

var data = ,,,

,]};(0.7.0+)版以後新增的功能,支援待迴圈集合用函式代替:

....

例:f = function(step) ;

$("#result").settemplate("

");$("#result").processtemplate();

#foreach在每次迴圈時請求的就是f函式,然後傳遞引數給f使用,並返回結果給funcvalue變數

#cycle 語法:

功能:提供週期性的呼叫,在迴圈中實現交替樣式功能時可用到

示例:下面模板在執行迴圈時,就會週期性的呼叫#cycle陣列中的值,這樣就能實現行交替的效果:

#include 語法:

功能:提供子模板呼叫

示例:

說明: 是指定模板的主要部分,必不可少。

是定義乙個名為「row」的子模板。

是主模板呼叫「row」子模板,並傳遞引數$t.record

#param 語法:

功能:定義模板內的區域性變數引數,使用$p呼叫。

示例:$("#result").settemplate("");

$("#result").processtemplate();

輸出結果:888

示例:$("#result").settemplate("");

$("#result").setparam('x', 777);

$("#result").processtemplate();

輸出結果:778

示例:$("#result").settemplate(" ");

$("#result").setparam('x', 1);

$("#result").processtemplate(data);

需要資料:

var data = ,,,

,]};輸出結果:

# 1 anne

# 4 amelia

# 7 polly

# 10 alice

# 13 martha

TreeView繫結資料 WinForm控制項

首先在資料庫中建立一張表 結構入下 然後插入資料 在 窗體上放置乙個treeview 在後台新增 如下 private void treedatabind private void createtreeviewrecursive treenodecollection nodes,datatable ...

繫結Enum到DropDownList控制項的方法

有時,需要將乙個列舉型別繫結到dropdownlist供使用者選擇,這主要是enum.getnames和enum.getvalues的使用。方法如下 dropdownlist.datasource enum.getnames typeof yourenumtype dropdownlist.data...

資料繫結 多路繫結MultiBinding

有時候ui要顯示的資訊又不止乙個資料 決定,就需要使用multibinding,multibinding具有乙個名為bindings的屬性,其型別是collection,通過這個屬性multibinding把一組binding物件聚合起來,處在這個集合中的binding物件可以擁有自己的資料校驗與轉...