iT邦幫忙

DAY 21
1

Kuick Hands on Labs系列 第 21

Kuick Hands on Labs -- 21. 優化新增表單(布林與日期欄位)

  • 分享至 

  • xImage
  •  

後台網站總是不同於前台,需要符合大多數瀏覽器所支援的功能,反而能夠限制僅支援特定版本以上的瀏覽器,有這樣的開發條件,讓我們可以安心使用HTML5增加的多種表單輸入型態。
<布林欄位>
1. 判定資料欄位是否為布林欄位

if(column.IsBoolean) {
    // code here!
}

2. 以 checkbox 類型的 <input> 表單呈現
為了能更加方便地選取checkbox,記得在外部加上 <label>。

sb.AppendFormat(
	"<label class=\"checkbox\"><input id=\"{0}\" name=\"{0}\" type=\"checkbox\" class=\"boolean optional\"></label>",
	column.AsName
);

<日期欄位>
1. 判定資料欄位是否為時間欄位

if(column.IsDateTime) {
    // code here!
}

2. 以 datetime 類型的 <input> 表單呈現
每個瀏覽器實作html5表單的方式不同,這份labs是使用Chrome 30.0.1599.101 m 版本作為測試環境。

if(column.Visual.Input == VisualInput.Date) {
	// yyyy-MM-dd
	sb.AppendFormat(
		"<input id=\"{0}\" name=\"{0}\" type=\"date\" class=\"form-control\">",
		column.AsName
	);
} else {
	// yyyy-MM-dd hh:mm:ss
	sb.AppendFormat(
		"<input id=\"{0}\" name=\"{0}\" type=\"datetime\" class=\"form-control\">",
		column.AsName
	);
}


上一篇
Kuick Hands on Labs -- 20. 優化新增表單(外鍵欄位)
下一篇
Kuick Hands on Labs -- 22. 優化新增表單(主鍵與其他部份)
系列文
Kuick Hands on Labs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

我要留言

立即登入留言