這個(gè)需求比較簡(jiǎn)單,就是下拉列表的項(xiàng)是異步請(qǐng)求過來的加載的,而點(diǎn)擊gird的編輯一行按鈕實(shí)現(xiàn)動(dòng)態(tài)選擇表單的行內(nèi)容:

點(diǎn)擊編輯效果:

圖中的RulesDictID項(xiàng)是從后臺(tái)異步獲取的.那么我們?cè)谇岸诉@樣寫:

    <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: { //配置初始請(qǐng)求的參數(shù)
                    sortname: 'ID ',
                    page: '1'

                },
                root: 'Rows',               //存放數(shù)據(jù)的字段名(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: '服務(wù)線程名稱', dataIndex: 'SocketThreadName' },
                     { title: '線程服務(wù)反射類型', 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';
                        }
                        //檢驗(yàn)
                        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增加一個(gè)事件監(jiān)聽器listeners在cellclick事件增加一個(gè)獲取editor的編輯器值,從而獲取當(dāng)前點(diǎn)擊行的值record.

record屬性包含當(dāng)前編輯器保存的整個(gè)對(duì)象屬性,所以直接可以獲取綁定到gird時(shí)候的屬性RulesDictID,由于bui框架生成html后下拉框附加一個(gè).bui-select-input 的樣式,所以通過在渲染select時(shí)候的id+這個(gè)樣式名可以對(duì)這個(gè)下拉框進(jìn)行賦值.

如果不增加這個(gè)函數(shù)進(jìn)行賦值,則默認(rèn)使用異步過來的select是無法選取初始值的,在其所在div附加上樣式bui-form-field-select 雖然能解決選取問題,但會(huì)出現(xiàn)3個(gè)下拉框非常惱火.

如果大家有更好的解決方案,可以在下面進(jìn)行回復(fù).

總結(jié)

以上是生活随笔為你收集整理的解决Bui框架下拉框select配合Gird弹出模态编辑框使用,无法选取编辑行的下拉内容.的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。