Javascript 动态jqGrid不显示任何数据

我正在打开jQueryUI对话框，其中包含jqGrids（目前的本地数据）。这部分工作正常，但当我尝试调用我的网格构建函数并将其附加到动态生成的

DIV

时，我只得到

jqGrid

的外壳，其中包含表标题，但没有数据。有什么想法吗？以下是被挡下的来源：

        var dialog_count = 0;
        var default_grid = {
                datatype: "local", 
                height: 80, 
                rowNum: 10, 
                rowList: [10,20,30], 
                multiselect: true, 
                rowList:[10,20,30], 
                sortname: 'id', viewrecords: true, sortorder: "asc",
                footerrow: true,
                loadui: "block"
        };
        var randomNum = function(){
            return Math.floor(1000000 + Math.random() * 9000000);
        };
        var returnKeys = function(obj){
            var arr = [];
            for (var keys in obj[0]){
                arr.push(keys)
            }
            return arr;
        };
        var createGrid = function(gridInfo,div){
            var gridKeys = returnKeys(gridInfo);
            if (typeof(div) !== "object"){
                div = $('#'+div);
            }

            var details = $.extend({
                data: gridInfo,
                colModel: function(){
                    var arr = [];
                    var colnam = gridKeys;
                    $.each(colnam, function(index,value){
                        arr.push({name: value,index:value,width:80 })
                    });
                    return arr;
                }()
            },default_grid);
            var rand = randomNum();
            var pager = 'pager'+rand;
            var str = '<div id="'+pager+'"></div>';

            var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
            var grid_args = $.extend({pager: '#'+pager},details);
            console.log(div)
            grid.jqGrid(grid_args);
        };

        $.fn.createDialog = function(opts,titl,page,tpl){
            var custom = {
                open: function(){ 
                    if(typeof(page) === "string"){
                        $(this).load(page);
                    }
                },
                title: titl
            }

            var veryCustom = $.extend(custom,opts);

            if(typeof(page) === "object"){
                var container = $("body"),
                divName = 'adiv'+dialog_count;
                tpl = (tpl == undefined) ? '' : tpl,
                dlg = container.append('<div id="'+divName
                        +'">'+tpl+'</div>').find('div#'+divName);
                dlg.dialog(veryCustom);

                if(page.length === 1){
                    createGrid(page[0],divName);
                }
            }else{
                $('<div/>').dialog(veryCustom);
            }
            dialog_count++;
        };
        var contentDialog = {
                width: 700,
                height: 200,
                position: [200,300]
        };
        var grid3template = function(obj){
            var str = $('<div class="meta"> \
                <div class="someClass"> \
                    yada yada \
                </div> \
                <div id="someDiv22">more text</div> \
                </div><!-- end class meta --> \
            '
            );
            createGrid(obj.grid3data, str.find("#someDiv22"));
            return str.html();
        };


   var grid1data = [ 
        {id:"<a href='#' class='grid1click'>63028</a>",division:"school",ctype:"building",tnum:'$100',cdate:"2011-02-09",cust:"Big HS",country:"USA",state:"VA"},
    ];
    jQuery("#grid1").jqGrid({ 
        data: grid1data, 
        datatype: "local", 
        height: 80, 
        rowNum: 10, 
        rowList: [10,20,30], 
        colModel:[ 
            {name:'id',index:'id', width:60, sorttype:"int"}, 
            {name:'division',index:'division', width:72},
            {name:'ctype',index:'ctype', width:100}, 
            {name:'tnum',index:'tnum',width:50},
            {name:'cdate',index:'cdate', width:94, sorttype:"date", formatter:"date"}, 
            {name:'cust',index:'cust', width:90},
            {name:'country',index:'country', width:30},
            {name:'state',index:'state', width:30}
        ],
        multiselect: true, 
        rowList:[10,20,30], 
        caption: "Grid 1" ,
        pager: '#plistGrid1', 
        sortname: 'id', viewrecords: true, sortorder: "asc",
        loadui: "block"
    });

    var grid2data = [ {id:"<a href='#' class='grid2click'>1</a>",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"} ];

    var grid3obj = {
        grid3data: [ {name:'<span class="provclick">1st Action Services</span>',ufoc:'AA2143',assoc:'Former Affiliate',city:'Austell',state:'GA',active:'Inactive'},{name:'281-Flooded, Inc.',ufoc:'351',assoc:'Member',city:'Houston',state:'TX',active:'Active'},{name:'Jim Davis Carpet Cleaning & Restoration Services, Inc',ufoc:'AA2177',assoc:'Former Affiliate',city:'Terre Haute',state:'IN',active:'Inactive'},{name:'A Fantabulous Restore Co.',ufoc:'999',assoc:'Member',city:'Disasterville',state:'IN',active:'Active'},{name:'Stellar Restoration Services, Inc',ufoc:'399',assoc:'Affiliate',city:'Bloomington',state:'IL',active:'Active'},{name:'We Do Trees Inc.',ufoc:'778',assoc:'National Partner',city:'Forest Grove',state:'WY',active:'Active'}]
    };

    $('.grid1click').click(function(e){
        e.preventDefault();
        $(this).createDialog(contentDialog,"Grid 2",[grid2data]);
    });

    $('.grid2click').live('click',function(e){
                e.preventDefault();
                $(this).createDialog(contentDialog,'Grid 3',[],grid3template(grid3obj));    
    });

var对话框\u计数=0；
var默认网格={
数据类型：“本地”，
身高：80，
rowNum:10，
行列表：[10,20,30]，
多选：对，
行列表：[10,20,30]，
sortname:'id'，viewrecords:true，sortorder:'asc'，
是的，
loadui：“块”
};
var randomNum=函数（）{
返回Math.floor（1000000+Math.random（）*9000000）；
};
var returnKeys=功能（obj）{
var-arr=[]；
for（obj[0]中的var键）{
arr.push（按键）
}
返回arr；
};
var createGrid=函数（gridInfo，div）{
var gridKeys=返回键（gridInfo）；
if（类型（div）！=“对象”）{
div=$（“#”+div）；
}
变量详细信息=$.extend({
数据：gridInfo，
colModel:function（）{
var-arr=[]；
var colnam=网格；
$.each（colnam，函数（索引，值）{
arr.push（{name:value，index:value，width:80}）
});
返回arr；
}()
}，默认网格）；
var rand=randomNum（）；
变量pager='pager'+rand；
var-str=''；
var grid=div.append（“”+str）.find（‘#aGrid’+rand）；
var grid_args=$.extend（{pager:'#'+pager}，详细信息）；
控制台日志（div）
grid.jqGrid（grid_args）；
};
$.fn.createDialog=函数（选项、标题、页面、tpl）{
变量自定义={
打开：函数（）{
如果（类型（页面）=“字符串”）{
$（此）.load（第页）；
}
},
标题：标题
}
var veryCustom=$.extend（自定义，选项）；
if（类型（页面）=“对象”）{
变量容器=$（“主体”），
divName='adiv'+对话框计数；
tpl=（tpl==未定义）？“”：tpl，
dlg=container.append（“”+tpl+“”）.find（'div#'+divName）；
dlg.dialog（veryCustom）；
如果（page.length==1）{
createGrid（第[0]页，divName）；
}
}否则{
$（''）.dialog（veryCustom）；
}
对话框_count++；
};
var contentDialog={
宽度：700，
身高：200，
职位：[200300]
};
var grid3template=函数（obj）{
var str=$（'\
\
雅达雅达\
\
更多文本\
\
'
);
createGrid（obj.grid3data，str.find（#someDiv22”）；
返回str.html（）；
};
变量grid1data=[
{id:，部门：“学校”，ctype:“建筑”，tnum:'100'，cdate:'2011-02-09'，客户：“大HS”，国家：“美国”，州：“VA”}，
];
jQuery（“#grid1”）.jqGrid（{
数据：Grid1数据，
数据类型：“本地”，
身高：80，
rowNum:10，
行列表：[10,20,30]，
colModel:[
{名称：'id'，索引：'id'，宽度：60，排序类型：“int”}，
{名称：'division'，索引：'division'，宽度：72}，
{名称：'ctype'，索引：'ctype'，宽度：100}，
{名称：'tnum'，索引：'tnum'，宽度：50}，
{名称：'cdate'，索引：'cdate'，宽度：94，排序类型：“日期”，格式化程序：“日期”}，
{名称：'cust'，索引：'cust'，宽度：90}，
{名称：'country'，索引：'country'，宽度：30}，
{名称：'state'，索引：'state'，宽度：30}
],
多选：对，
行列表：[10,20,30]，
标题：“网格1”，
寻呼机：“#plistGrid1”，
sortname:'id'，viewrecords:true，sortorder:'asc'，
loadui：“块”
});
var grid2data=[{id:，invdate:“2007-10-01”，名称：“test”，注释：“note”，金额：“200.00”，税：“10.00”，总计：“210.00”}]；
var grid3obj={
grid3data:[{名称：'First Action Services'，ufoc:'AA2143'，协会：'前附属公司'，城市：'Austell'，州：'GA'，活动：'Inactive'}，{名称：'281-Floaded，Inc.，ufoc:'351'，协会：'Member'，城市：'Houston'，州：'TX活动：'active'}，{名称：'Jim Davis地毯清洁与修复服务有限公司'，ufoc:'AA2177'，协会：'前附属公司'，城市：'Terre Haute'，州：'IN'，活动：'Inactive'，非活动'}，{名称：'A Fantablue Restore Co.，ufoc:'999'，协会：'Member'，城市：'Disasterville'，州：'IN'，活动：'active'}，{名称：'Stellar Restoration Services，Inc'，ufoc:'399'，协会：'Affiliate'，城市：'Bloomington'，州：'IL'，活动：'active'}，{名称：'We Do Trees Inc.，ufoc:'778'，协会：'National Partner'，城市：'Forest Grove'，州：'WY'，活动：'active'}]
};
$（'.grid1click'）。单击（函数（e）{
e、 预防默认值（）；
$（this.createDialog（contentDialog，“Grid 2”，[grid2data]）；
});
$（'.grid2click'）.live（'click'，函数（e）{
e、 预防默认值（）；
$（this.createDialog（contentDialog，'Grid 3'，[]，grid3template（grid3obj））；
});

以及HTML：

<table id="grid1"><tr><td>&nbsp;</td></tr></table>
<div id="plistGrid1"></div>

---

在我看来，您的问题在于，您试图为只是jQuery分离的对象创建jqGrid

<div id="someDiv22">more text</div>

我想要解决这个问题，你应该把

div#someDiv22

放在页面的某个地方（在

主体

的内部），然后用

grid.jqGrid（grid\u args）

创建网格，我就开始了

var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand);
...
grid.jqGrid(grid_args);