解决Bui框架下拉框select配合Gird弹出模态编辑框使用,无法选取编辑行的下拉内容.

  这个需求比较简单,就是下拉列表的项是异步请求过来的加载的,而点击gird的编辑一行按钮实现动态选择表单的行内容:

点击编辑效果:

图中的RulesDictID项是从后台异步获取的.那么我们在前端这样写:

    <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,
                     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个下拉框非常恼火.

如果大家有更好的解决方案,可以在下面进行回复.