工作,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。

posted on 2017-07-07 16:12  不那么敷衍  阅读(131)  评论(0编辑  收藏  举报

导航