新闻发布
管理系统传统意义的在线反馈支持单字段输入方法，在过程中单字段操作简单易于字段维护，但是对于单字段多值的方法就需要用到域，需要建立一个附表用来存储相关数字，比如用户字段“参会代表”还有其他的内容比如：姓名、性别、电话、传真等其他的复选项。
在前端用户UI界面设计时候也需要考虑到用户操作的方便性，页面的承载能力，还有手机端的操作方式。
UI可以采用单字段垂直的交互方式进行设计，“参会代表”可以采用折叠的方式进行用户交互，在进行第一次信息输入的时候，用户点击添加通过JS样式输出展示出“参会代表”的其他的附带的信息；当用户输入第二个字段信息的时候，第一条信息自动收回，以此类推第三、第四、第五…更多的细信息，每个字段JS提供“删除”功能保证信息可修改。用户界面设计如下
前端代码实现如下：
_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;
}
