Resolves the Bui frame dropdown box select with the Gird pop-up modal edit box, you cannot select the drop-down content of the edit row.

This requirement is relatively simple, that is, the drop-down list of items is asynchronous request to come over the load, and click on the Gird Edit line button to dynamically select the form's line content:

Click Edit Effect:

The Rulesdictid item in the figure is obtained asynchronously from the background. So we write on the front end:

    <Divclass= "Row-fluid">        <Divclass= "Span24">            <Divclass= "Panel">                <Divclass= "Panel-header">                    <DivID= "Tbar"></Div>                </Div>                <DivID= "Grid">                </Div>                <DivID= "Bar"class=""></Div>            </Div>        </Div>    </Div>    <DivID= "Content"class= "Hide">        <formclass= "Form-horizontal"Method= "POST">            <Divclass= "Row-fluid">                <Divclass= "Control-group span10">                    <Divclass= "Control-group">                        <labelclass= "Control-label"><s>*</s>Rulesdictid:</label>                        <Divclass= "Controls">                            <DivID= "Selectrulesdictid" >                                <inputtype= "hidden"ID= "Rulesdictid"name= "Rulesdictid"Data-rules= "{required:true}">                            </Div>                                             </Div>                    </Div>                </Div></form></Div>

And in JS,

<script type= "Text/javascript" >               $(function() {$.ajax ({type:"GET", URL:"/config/rulesdictinfo/getalltolist", Cache:false, DataType:"JSON", Success:function(data) {varItems =data; Bui.use ([' Bui/select '],function(Select) {select=NewSelect.select ({render:' #selectRulesDictID ', Valuefield:' #RulesDictID ', Multipleselect:false, items:items});                        });                Select.render ();        }            });        }); Bui.use ([' Bui/data ', ' bui/select '],function(Data, Select) {varStore =Data.store; Store=NewStore ({URL:'/config/socketsconfig/getall ', AutoLoad:true, params: {//Configure parameters for the initial requestSortname: ' ID ', page:' 1 '}, Root:' Rows ',//field name (row-fluids) where the data is storedTotalproperty: ' Total ', PageSize:20            });        }); //Initialize GridBui.use ([' Bui/grid ', ' Bui/toolbar '),function(Grid, Toolbar) {varGrid =Grid, Numerpbar=Toolbar.numberpagingbar, Enumgdobj= {' True ': ' Is ', ' False ': ' No '} columns=[{title:' ID ', dataindex: ' ID '}, {title:' Service thread name ', Dataindex: ' Socketthreadname '}, {title:' Thread service Reflection type ', Dataindex: ' Socketthreaddoworktype '}, {title:' Config dictionary id ', dataindex: ' Rulesdictid '}, {title:' Whether enabled ', Dataindex: ' Isavtive ', Renderer:Grid.Format.enumRenderer (Enumgdobj)}]; Editing=NewGrid.Plugins.DialogEditing ({contentId:' Content ', Triggercls:' Btn-edit ', AutoUpdate:false, Editor: {height:450, Width:900, Success:function () {                        varEdtor = This, Form= Edtor.get (' form '), EditType= Editing.get (' EditType '); if(EditType = = ' Add ') {URL= '/config/socketsconfig/add '; } Else{URL= '/config/socketsconfig/edit '; }                        //InspectionForm.valid (); if(Form.isvalid ()) {Form.ajaxsubmit ({//form Asynchronous CommitUrl: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 ');                        }                            });            }                    }                }            }); varBar =NewNumerpbar ({render:' #bar ', Autorender:true, Elcls:' Pagination Pull-right ', Store:store}); Grid=NewGrid.grid ({render:' #grid ', Columns:columns, Height:BUI_Ext.GridHeight-80, Forcefit:true, plugins: [Editing, Grid.Plugins.CheckSelection], Store:store, listener S: {cellclick:function(EV) {varSender =$ (ev.domtarget), editor= Editing.get (' editor '); varTriggercls = Editing.get (' triggercls ')); if(Sender.hasclass (TRIGGERCLS) &&editor) {                            varClvalue =Ev.record.RulesDictID, Hideselect= $ ("#selectRulesDictID. Bui-select-input"); if(Clvalue! =Hideselect.val ())                            {Hideselect.val (clvalue);            }                        }                    }                }            }); varTbar =NewToolbar.bar ({render:' #tbar ', Elcls:' Toolbar Pull-left ',            });            Bui_ext.loadtoolbarbygrid (Tbar, grid, Toolbarbtnitemclick);            Tbar.render ();        Grid.render ();    }); </script>

Note that we have to add an event listener to the grid listeners in the Cellclick event to get the editor value in the edit to get the value of the current click Row Record.

The Record property contains the entire object property that is saved by the current editor, so you can directly get the property Rulesdictid bound to Gird, since the Bui framework generates HTML after the drop-down box appends a. Bui-select-input style, So you can assign this drop-down box by id+ this style name when you render the select.

If you do not add this function to the assignment, the default use of asynchronous select is not able to pick the initial value, in its div appended to the style Bui-form-field-select Although the selection problem can be resolved, but there will be 3 drop-down boxes very annoying.

If you have a better solution, you can reply below.

Resolves the Bui frame dropdown box select with the Gird pop-up modal edit box, you cannot select the drop-down content of the edit row.