JS使用模板快速填充HTML控制項資料

2021-07-05 08:32:23 字數 1620 閱讀 7062

先寫個非常重要的js方法,此方法就是用來填充格式資料的。(看不懂也沒關係,會用就行)

js** 收藏**

function formattemplate(dta, tmpl)

}; return tmpl.replace(//g, function(m1, m2) );

} 接下來就用示例來說明:

例如:從伺服器取出乙個json串,把資料顯示在一組html控制項上,現在我先把html**寫下來:

html** 收藏**

重新命名

替換 刪除

設定封面

大家看到了這段**,如果全部寫js上確實比較煩,而且大家也發現了,為什麼在首尾有標籤,裡面有{}括號括住了一些值,為什麼這麼寫呢,別急別急。其實這些{}號中的資料,就是我們要填充的資料的地方。括號中的名稱就是存貯值的變數,好,要怎麼填呢?

若我們從伺服器上取到的json如下:

js** 收藏**

, , ]

} 我們要填寫到地方定義在下面table中

html** 收藏**

名稱型別

大小尺寸

上傳日期操作

好了準備工作做好了,重點的來了,別看走眼了:
js** 收藏**

$.ajax(

//獲取模板上的html  

var html = $('script[type="text/template"]').html();

//定義乙個陣列,用來接收格式化合的資料

var arr = ;

//對資料進行遍歷

$.each(dta.rows, function(i, o) );

//好了,最後把陣列化成字串,並新增到table中去。

//走完這一步其實就完成了,不會吧,這麼簡單,不錯,就是這麼簡單!! 不信就自己動手去試試!

}

喲嚯,搞定,等等,好像**的列數對不上,是吧,那是因為我沒有把模板寫完整出來,繼續往下看。

現在我來解釋為什麼把模板**放在中間,假如,你把模板**放在某個中並隱藏起來,那麼可能你的**中會用到$('input[type="text"]')查詢控制項時,不好意思,就會把模板中的也統計進去了,這個並不是你想要的。所以我用,這麼做還有乙個好處,就是不會被當成html來執行顯示出來, 但我們也得保證不能當成js來執行,所以加了個type="text/template",沒有這個型別的,自己明白就好了。

另外,像o.mid的數值只會填充到這個裡,不會填充到別的地方去,而且可以存在多個,一併全部替換成實際數值了。

接下來的乙個問題就是,我取到的資料可能並不是我要給使用者顯示的,那麼就需要變通一下了

js** 收藏**

var html = (『

scri

pt[t

ype=

」tex

t/te

mpla

te」]

′).h

tml(

);va

rarr

=;(『script[type=」text/template」]』).html();

var arr = ;

Express使用html模板

express預設使用jade模板,可以配置讓其支援使用ejs或html模板。1.安裝ejs 在專案根目錄安裝ejs.npm install ejs2 引入ejs var ejs require ejs 我是新引入的ejs外掛程式3 設定html引擎 設定檢視引擎 儲存後重啟服務,即可訪問html檔...

Express使用html模板

express預設使用jade模板,可以配置讓其支援使用ejs或html模板。1.安裝ejs 在專案根目錄安裝ejs.npm install ejs 2 引入ejs var ejs require ejs 我是新引入的ejs外掛程式 3 設定html引擎 設定檢視引擎 view engine htm...

Express使用html模板

express預設使用jade模板,可以配置讓其支援使用ejs或html模板。在專案根目錄安裝ejs.npm install ejs var ejs require ejs 我是新引入的ejs外掛程式 設定檢視引擎 儲存後重啟服務,即可訪問html檔案。注 在express搭建的伺服器中,html引...