我正在使用jqGrids(当前的本地数据)打开jQuery UI对话框。该部分有效,但是当我尝试调用我的网格构建函数并将其附加到动态创建的DIV
时,我只获得带有表标题的jqGrid
的shell但没有数据。有任何想法吗?这是下来的来源:
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));
});
和HTML:
<table id="grid1"><tr><td> </td></tr></table>
<div id="plistGrid1"></div>
答案 0 :(得分:0)
在我看来,你的问题是你试图为jQuery 分离对象的对象创建jqGrid。在您创建的函数grid3template
中
<div id="someDiv22">more text</div>
但不会将其放在页面上。然后在createGrid
函数内使用
var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand);
...
grid.jqGrid(grid_args);
我想解决一个问题,你应该将div#someDiv22
置于页面的某个位置(body
内),然后才能使用grid.jqGrid(grid_args)
创建网格。