openwrt web gui Luci CBI 给value 文本框添加readonly属性

LUCI 网上的内容比较少，想给cbi的标准模板添加一个readonly属性，找了半天没有找到。网上能查到的就只有这个：

class Value (option, title, description)
An object describing an option in a section of a UCI File. Creates a standard text field in the formular.

To instantiate use: NamedSection:option(Value, "option", "title", "description")

or TypedSection:option(Value, "option", "title", "description")

option: UCI option name
title: The title shown in the UI
description: description shown in the UI
function :depends(key, value)
Only show this option field if another option key is set to value in the same section.

If you call this function several times the dependencies will be linked with "or"

function :value(key, value)
Convert this text field into a combobox if possible and add a selection option.

property .default = nil
The default value

property .maxlength = nil
The maximum inputlength (of chars) of the value

property .optional = false
Marks this option as optional, implies .rmempty = true

property .rmempty = true
Removes this option from the configuration file when the user enters an empty value

property .size = nil
The maximum number of chars displayed by form field

就那么几个属性，没有readonly属性。

换个思路，研究模板发给client的代码，是怎么生成的。

生成的代码如下：

	<input type="text" class="cbi-input-text" onchange="cbi_d_update(this.id)" name="cbid.cfg_file.sn.sn" id="cbid.cfg_file.sn.sn" value="11111" />

经研究，是通过 /usr/lib/lua/luci/view/cbi/value.htm 生成的原代码如下：

<%+cbi/valueheader%>
	<input type="<%=self.password and 'password" class="cbi-input-password' or 'text" class="cbi-input-text' %>" onchange="cbi_d_update(this.id)"<%=
		attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section) or self.default) ..
		ifattr(self.size, "size") .. ifattr(self.placeholder, "placeholder")
	%> />
	<% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
	<% if #self.keylist > 0 or self.datatype then -%>
	<script type="text/javascript">//<![CDATA[
		<% if #self.keylist > 0 then -%>
		cbi_combobox_init('<%=cbid%>', {
		<%-
			for i, k in ipairs(self.keylist) do
		-%>
			<%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>
			<%-if i<#self.keylist then-%>,<%-end-%>
		<%-
			end
		-%>
		}, '<%- if not self.rmempty and not self.optional then -%>
			<%-: -- Please choose -- -%>
			<%- elseif self.placeholder then -%>
			<%-= pcdata(self.placeholder) -%>
		<%- end -%>', '
		<%- if self.combobox_manual then -%>
			<%-=self.combobox_manual-%>
		<%- else -%>
			<%-: -- custom -- -%>
		<%- end -%>');
		<%- end %>
		<% if self.datatype then -%>
		cbi_validate_field('<%=cbid%>', <%=tostring((self.optional or self.rmempty) == true)%>, '<%=self.datatype:gsub("'", "\\'")%>');
		<%- end %>
	//]]></script>
	<% end -%>
<%+cbi/valuefooter%>

找到源头了就好办了，做如下修改：

<%+cbi/valueheader%>
	<input type="<%=self.password and 'password" class="cbi-input-password' or 'text" class="cbi-input-text' %>" onchange="cbi_d_update(this.id)"<%=
		attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section) or self.default) ..
		ifattr(self.size, "size") .. ifattr(self.placeholder, "placeholder")
	%> style="width: auto" <%if self.readonly then %>readonly="true"<% end %>/>
	<% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
	<% if #self.keylist > 0 or self.datatype then -%>
	<script type="text/javascript">//<![CDATA[
		<% if #self.keylist > 0 then -%>
		cbi_combobox_init('<%=cbid%>', {
		<%-
			for i, k in ipairs(self.keylist) do
		-%>
			<%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>
			<%-if i<#self.keylist then-%>,<%-end-%>
		<%-
			end
		-%>
		}, '<%- if not self.rmempty and not self.optional then -%>
			<%-: -- Please choose -- -%>
			<%- elseif self.placeholder then -%>
			<%-= pcdata(self.placeholder) -%>
		<%- end -%>', '
		<%- if self.combobox_manual then -%>
			<%-=self.combobox_manual-%>
		<%- else -%>
			<%-: -- custom -- -%>
		<%- end -%>');
		<%- end %>
		<% if self.datatype then -%>
		cbi_validate_field('<%=cbid%>', <%=tostring((self.optional or self.rmempty) == true)%>, '<%=self.datatype:gsub("'", "\\'")%>');
		<%- end %>
	//]]></script>
	<% end -%>
<%+cbi/valuefooter%>

添加了<%if self.readonly then %>readonly="true"<% end %>，当readonly为true里，添加readonly="true"属性。

编写model>cbi> .lua文件验证

m = Map("cfg_file", translate("产品序列号")) -- cbi_file is the config file in /etc/config
d = m:section(TypedSection, "sn")  -- info is the section called info in cbi_file
a = d:option(Value, "sn", translate("序列号"));
a.optional=false; 
a.rmempty = false;  -- name is the option in the cbi_fil
a.readonly = true; 
return m

在浏览器端查看生成的代码，如下：

<input type="text" class="cbi-input-text" onchange="cbi_d_update(this.id)" name="cbid.cfg_file.sn.sn" id="cbid.cfg_file.sn.sn" value="11111"  readonly="true" />

input 属性中增加了 readonly="true" 文本框已变为不可输入。