工作，jquery ui dialog

好气啊，写了半天随笔，不小心按了2次回车就啥都找不到了，没有心情重写了=。=贴下代码如下（功能：按按钮弹框，下拉框显示后台数据）

<div id="jud">
             
                <div class="text-align-left" id="btn2">
                <label>弹出框</label> 
                    <select style="width:100%" class="form-control input-sm select2"  id="dataRelated" >
                    </select>
                </div>
 </div>

$('#jud').dialog({
                autoOpen: false,
                width : 500,
                resizable : false,
                modal : true,
                show :'drop',
                hide: 'drop'
                });

这个定义样式的也可以写在下面一起里面

$('#jud').dialog({
                        title:"Jquery UI Dialog",
                        
                        buttons:[
                             {
                                    html : "确认",
                                      "class" : "btn btn-default",
                                      click: function() {
                                         $( this ).dialog( "close" );
                                        }
                                      
                                    },
                            {
                                html : "取消",
                                "class" : "btn btn-default",
                                click: function() {
                                     $( this ).dialog( "close" );
                                    }
                                  
                                }
                            ]
                    });
                    $('#jud').dialog('open');

上面这段代码可以封装在一个function里面绑定在按钮上。但是我的按钮在dataTable里面，所以将这段代码写在了$('#MyDataTable').delegate('.construct','click', function () {});方法里面。（我的按钮class是construct）

                tr = $(this).closest('tr');
                var data = table.row(tr).data();
                $.ajax({
                    type: 'POST',
                    url: '../HistoryProJectServlet',
                    dataType: 'json',
                    data: {
                        id: data.struct_id,
                        mode: data.struct_mode
                    },
                    error : function(msg) {
                        errMessage("获取相关数据失败");
                    },
                    success : function(json) { 
                        historyProdata = json.obj;
                        console.log(historyProdata);
                        var d = $('#historyPro');
                        d.empty();
                        for(var i = 0; i<historyProdata.length; i++){
                            d.append('<option value="'+historyProdata[i].prj_id+'">'+historyProdata[i].prj_desc+'</option>');
                        }
                        
                        d.trigger('change');
                    }
                        
                    });

这个是初始化数据，当然这个要放在js代码段最前面。

详细jquery dialog的了解可以访问http://jqueryui.com/dialog/#default。

转载于:https://www.cnblogs.com/tbb-pxq/p/7132784.html