http://www.cnblogs.com/xmax130/p/4737221.html
这个需求比较简单,就是下拉列表的项是异步请求过来的加载的,而点击gird的编辑一行按钮实现动态选择表单的行内容:
点击编辑效果:
<div class="row-fluid"> <div class="span24"> <div class="panel"> <div class="panel-header"> <div id="tbar"></div> </div> <div id="grid"> </div> <div id="bar" class=""></div> </div> </div> </div> <div id="content" class="hide"> <form class="form-horizontal" method="post"> <div class="row-fluid"> <div class="control-group span10"> <div class="control-group"> <label class="control-label"><s>*</s>RulesDictID：</label> <div class="controls"> <div id="selectRulesDictID" > <input type="hidden" id="RulesDictID" name="RulesDictID" data-rules="{required:true}"> </div> </div> </div> </div></form></div>
而在js中
<script type="text/javascript"> $(function () { $.ajax({ type: "GET", url: "/Config/RulesDictInfo/GetAllTolist", cache: false, dataType: "json", success: function (data) { var items =data; BUI.use(['bui/select'], function (Select) { select = new Select.Select({ render: '#selectRulesDictID', valueField: '#RulesDictID', multipleSelect: false, items: items }); }); select.render(); } }); }); BUI.use(['bui/data', 'bui/select'], function (Data, Select) { var Store = Data.Store; store = new Store({ url: '/Config/SocketsConfig/GetAll', autoLoad: true, params: { //配置初始请求的参数 sortname: 'ID ', page: '1' }, root: 'Rows', //存放数据的字段名(row-fluids) totalProperty: 'Total', pageSize: 20 }); }); //初始化Grid BUI.use(['bui/grid', 'bui/toolbar'], function (Grid, Toolbar) { var Grid = Grid, NumerPBar = Toolbar.NumberPagingBar, enumGdObj = { 'True': '是', 'False': '否' } columns = [ { title: 'ID', dataIndex: 'ID' }, { title: '服务线程名称', dataIndex: 'SocketThreadName' }, { title: '线程服务反射类型', dataIndex: 'SocketThreadDoWorkType' }, { title: '配置字典ID', dataIndex: 'RulesDictID' }, { title: '是否启用', dataIndex: 'IsAvtive', renderer: Grid.Format.enumRenderer(enumGdObj) } ]; editing = new Grid.Plugins.DialogEditing({ contentId: 'content', triggerCls: 'btn-edit', autoUpdate: false, editor: { height: 450, width: 900, success: function () { var edtor = this, form = edtor.get('form'), editType = editing.get('editType'); if (editType == 'add') { url = '/Config/SocketsConfig/Add'; } else { url = '/Config/SocketsConfig/Edit'; } //检验 form.valid(); if (form.isValid()) { form.ajaxSubmit({ //表单异步提交 url: url, success: function (data) { if (data.IsError) { BUI.Message.Alert(data.Message, 'error'); } else { if (editType == 'add') { store.add(data.Data); } else { record = form.serializeToObject(); editing.saveRecord(record); } edtor.accept(); } }, error: function () { BUI.Message.Alert(data.Message, 'error'); } }); } } } }); var bar = new NumerPBar({ render: '#bar', autoRender: true, elCls: 'pagination pull-right', store: store }); grid = new Grid.Grid({ render: '#grid', columns: columns, height: BUI_Ext.GridHeight - 80, forceFit: true, plugins: [editing, Grid.Plugins.CheckSelection], store: store, listeners: { cellclick: function (ev) { var sender = $(ev.domTarget), editor = editing.get('editor'); var triggerCls = editing.get('triggerCls'); if (sender.hasClass(triggerCls) && editor) { var clValue = ev.record.RulesDictID, hideSelect = $("#selectRulesDictID .bui-select-input"); if (clValue != hideSelect.val()) { hideSelect.val(clValue); } } } } }); var tbar = new Toolbar.Bar({ render: '#tbar', elCls: 'toolbar pull-left', }); BUI_Ext.loadToolbarByGrid(tbar, grid, toolbarBtnItemClick); tbar.render(); grid.render(); }); </script>
注意,我们必须在grid增加一个事件监听器listeners在cellclick事件增加一个获取editor的编辑器值,从而获取当前点击行的值record.
record属性包含当前编辑器保存的整个对象属性,所以直接可以获取绑定到gird时候的属性RulesDictID,由于bui框架生成html后下拉框附加一个.bui-select-input 的样式,所以通过在渲染select时候的id+这个样式名可以对这个下拉框进行赋值.
如果不增加这个函数进行赋值,则默认使用异步过来的select是无法选取初始值的,在其所在div附加上样式bui-form-field-select 虽然能解决选取问题,但会出现3个下拉框非常恼火.
如果大家有更好的解决方案,可以在下面进行回复.
