新聞發(fā)布
管理系統(tǒng)傳統(tǒng)意義的在線反饋支持單字段輸入方法，在網站開發(fā)過程中單字段操作簡單易于字段維護，但是對于單字段多值的方法就需要用到域，需要建立一個附表用來存儲相關數(shù)字，比如用戶字段“參會代表”還有其他的內容比如：姓名、性別、電話、傳真等其他的復選項。
在前端用戶UI界面設計時候也需要考慮到用戶操作的方便性，頁面的承載能力，還有手機端的操作方式。
UI可以采用單字段垂直的交互方式進行設計，“參會代表”可以采用折疊的方式進行用戶交互，在進行第一次信息輸入的時候，用戶點擊添加通過JS樣式輸出展示出“參會代表”的其他的附帶的信息；當用戶輸入第二個字段信息的時候，第一條信息自動收回，以此類推第三、第四、第五…更多的細信息，每個字段JS提供“刪除”功能保證信息可修改。用戶界面設計如下
前端代碼實現(xiàn)如下：
_this.parents("table:eq(0)").append(_replace(_data,_index)).children('tr:last').find('input:first').focus();
var _tr = new Array(),
_key = 1,
_table = $("table");
_tr.push('<tr>');
_tr.push(' <td><input type="text" name="functionary[name][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><select name="functionary[gender][__KEY__]" class="form-control">');
_tr.push(' <option value="1">男</option>');
_tr.push(' <option value="2">女</option>');
_tr.push(' </select></td>');
_tr.push(' <td><input type="text" name="functionary[phone][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><input type="text" name="functionary[email][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><input type="text" name="functionary[address][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><a href="javascript:;" target="remove">[刪除]</a></td>');
_tr.push('</tr>');
$("a[target='added']").click(function(e){
e.preventDefault();
var _data = {};
_data["/__KEY__/g"] = ++_key;
_table.children('tbody').append(_replace(_data)).children('tr:last').find('input:first').focus();
});
_table.on('click',"a[target='remove']",function(e){
e.preventDefault();
$(this).parents("tr:eq(0)").remove();
});
function _replace(_data){
_trHtml = _tr.join('');
for(i in _data){
_trHtml = _trHtml.replace(eval(i),_data[i]);
}
return _trHtml;
}
