Question

我正在尝试使用FLEXIGRID创建一个脚本作为显示数据库信息的方法，但我希望用户也能够将信息输入到数据库中。我希望能够启动一个模态窗口，用户可以在其中输入信息并提交。 FLEXIGRID上按钮的编码方式如下：

$(document).ready(function(){

 $("#flex1").flexigrid
   (
   {
   url: 'post2.php',
   dataType: 'json',
   colModel : [
    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
......
   buttons : [
    {name: 'Add', bclass: 'add', onpress : test},
    {separator: true},
    {name: 'Delete', bclass: 'delete', onpress : test},
    {separator: true},
.... some more code ...

   }
   );   

});
function test(com,grid)
{
    if (com=='Add')
    {
              the code that triggers the modal window
    }
}

好的，我的问题：

当我按下“添加”时，我想要一个模态弹出窗口，使用Ajax加载本地文件的内容，以便用户可以输入信息。

到目前为止我所拥有的：

我尝试使用JqModal中的代码：加载CSS和Javascript：

<link rel="stylesheet" type="text/css" href="css/jqmodal.css" /> 
<script type="text/javascript" src="js/jqModal.js"></script>
$().ready(function() {
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});

在页面底部添加了div：

<div class="jqmWindow" id="ex2">
Please wait... <img src="inc/busy.gif" alt="loading" />
</div>

但如何触发此功能？

谢谢，克里斯蒂安。

LE：这是我现在的代码，它仍然不起作用：

IE说：对象不支持此属性或方法flexigrid，第56行字符5这正是$对话框函数启动的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#flex1").flexigrid
            (
            {
            url: 'post2.php',
            dataType: 'json',
            colModel : [
                {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
                {display: 'URL', name : 'url', width : 450, sortable : true, align: 'left'},
                {display: 'File Name', name : 'filename', width : 270, sortable : true, align: 'left'},
                {display: 'Availability', name : 'availability', width : 50, sortable : true, align: 'center'},
                {display: 'State', name : 'state', width : 40, sortable : true, align: 'center'},
                {display: 'Total Size', name : 'totalsize', width : 90, sortable : false, align: 'center'},
                {display: 'Current Size', name : 'currentsize', width : 90, sortable : false, align: 'center'},
                {display: 'Procent', name : 'procent', width : 40, sortable : true, align: 'center'},
                {display: 'Log',  width : 20, sortable : false, align: 'center'},
                ],
            buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {separator: true},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true},
                {name: 'Select All', bclass : 'selectall', onpress : test},
                {name: 'DeSelect All', bclass : 'deselectall', onpress : test},
                {separator: true}
                ],
            searchitems : [
                {display: 'URL', name : 'url'},
                {display: 'Filename', name : 'filename', isdefault: true}
                ],
            sortname: "state",
            sortorder: "asc",
            usepager: true,
            title: '',
            useRp: false,
            rp: 10,
            showTableToggleBtn: true,
            singleSelect: true
            }
            );   
});
$(document).ready(function() {
    $("#myDialog").dialog({
        autoOpen: false,
        resizable: false,
        position: 'center',
        stack: true,
        height: 'auto',
        width: 'auto',
        modal: true
     });

    $("#showDialog").button().click(function (event) {
        $("#myDialog").dialog('open');
    });
});
function test(com,grid)
{
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
    if (com=='Select All')
    {
        $('.bDiv tbody tr',grid).addClass('trSelected');
    }

    if (com=='DeSelect All')
    {
        $('.bDiv tbody tr',grid).removeClass('trSelected');
    }

    if (com=='Delete')
        {
           if($('.trSelected',grid).length>0){
               if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
                    var items = $('.trSelected',grid);
                    var itemlist ='';
                    for(i=0;i<items.length;i++){
                        itemlist+= items[i].id.substr(3)+",";
                    }
                    $.ajax({
                       type: "POST",
                       url: "delete.php",
                       data: "items="+itemlist,
                       success: function(data){
                        $('#flex1').flexReload();
                        alert(data);
                       }
                    });
                }
            } else {
                return false;
            } 
        }          
} 
</script>
</head>

<body>
<table id="flex1" style="display:none"></table>
<div id="myDialog" style="display:none" title=""></div>
</body>
</html>

LE2：如何通过ajax加载外部文件：

$(document).ready(function(){
    //define config object
   var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 500,
        width: 500,
        draggable: true,
        resizeable: true,
        open: function() {
        //display correct dialog content
        $("#myDialog").load("form.php");}
        };
    $("#myDialog").dialog(dialogOpts);  //end dialog

    $('#showdialog').click(function (event){
            $("#myDialog").dialog("open");
            return false;
        }
    );

});

Answer 1

以下示例适用于jQuery UI对话框

首先定义对话框所需的标记：

<div id="myDialog" style="display:none" title=""></div>

然后，在DOM就绪时，将对话框设置为jquery UI对话框

$("#myDialog").dialog({
    autoOpen: false, position: 'center', stack: true, height: 'auto', width: 'auto', modal: true
});

请注意autoOpen: false参数。

如果要显示对话框，只需调用代码中的open方法

function test(com,grid) {
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
}

希望它有所帮助！

<强>更新：

我已经在jsbin.com上为您创建了一个示例。您可以看到它here，但您可以看到代码here。

Answer 2

如果你使用visual studio 2008作为jquery使用css3验证，那么由于css类，Chris19就是这个错误。 VS2008不支持css3验证，所以jquery css的某些元素是未知的。

快速解决方法是转到工具 - ＆gt;选项 - ＆gt;显示所有复选框 - ＆gt;文字编辑器 - ＆gt; Css - ＆gt; Css Specific和关闭检测

flexigrid弹出模式窗口

2 个答案: