解決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,
                    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個下拉框非常惱火.

如果大家有更好的解決方案,可以在下面進行回復.