2011-06-07 2 views
0

Я последовал примеру создания нового jqGrid. Данные загружаются и отображаются нормально. Количество строк работает нормально. Единственная проблема заключается в том, что это просто отображение данных в ящиках сетки (как показано ниже). Нет слоя. Даже кнопки сортировки не отображаются/работают. Эффект css отсутствует, даже если ссылка указана на нужную папку.jqGrid - Отображение только сетки, такой как форма с данными

col1 | col2 | col3 
-------------------------- 
data1a | data1b | data1c 
-------------------------- 
data2a | data2b | data2c 

Вот HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My First Grid</title> 
<link rel="stylesheet" type="text/css" media="screen" href="../theme/css/ui.jqgrid.css" /> 

<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 50%; 
} 
</style> 

<script src="../theme/js/jquery-1.6.1.js" type="text/javascript"></script> 
<script src="../theme/js/grid.locale-en.js" type="text/javascript"></script> 
<script src="../theme/js/src/grid.loader.js" type="text/javascript"></script> 
<script src="../theme/js/jquery.jqGrid.src.js" type="text/javascript"></script> 
<script src=“../theme/js/src/jqDnR.js” type=“text/javascript”></script> 
<script src=“../theme/js/src/jqModal.js” type=“text/javascript”></script> 


<script type="text/javascript"> 
$(function(){ 
    $("#list").jqGrid({ 
    url:'JQ.php', 
    datatype: 'xml', 
    mtype: 'GET', 
    colNames:['UNIT ID','ROLE ID', 'CREATED DATE','CREATED BY','Inactive'], 
    colModel :[ 
     {name:'UNIT_ID', index:'UNIT_ID', width:55}, 
     {name:'ROLE_ID', index:'ROLE_ID', width:90}, 
     {name:'CREATED_DT', index:'CREATED_DT', width:100}, 
     {name:'CREATED_BY', index:'CREATED_BY', width:80}, 
     {name:'INACTIVE', index:'INACTIVE', width:80, sortable:false} 
    ], 
    pager: '#pager', 
    rowNum:10, 
    rowList:[10,20,30,50], 
    sortname: 'UNIT_ID', 
    sortorder: 'desc', 
    viewrecords: true, 
    gridview: true, 
    width: 500, 
    height: "100%", 
    caption: 'My first gridder' 
    }); 
}); 
</script> 
+0

Мой первый gridder БЛОК ID ID роли CREATED ДАТА СОЗДАННАЯ Неактивный 30100 ТТТ 11-JUN-02 UTECHGE N 30200 TTT 11-JUN-02 UTECHGE N 10000 ТТТ 11-JUN-02 UTECHGE N 30000 ТТТ 11 -JUN-02 UTECHGE N 10000 QA-ADMIN 20-May-11 UTECHGE N 20000 ТЕСТА-ПОЛЬЗОВАТЕЛЬ 20-МАЯ-11 UTECHGE N 20000 QA-ADMIN 20-May-11 UTECHGE N 20100 ТЕСТ-ПОЛЬЗОВАТЕЛЬ 20-МАЙ -11 UTECHGE N 20100 QA-ADMIN 20-MAY-11 UTECHGE N 20200 TEST-USER 20-MAY-11 UTECHGE N Страница 4 –

+0

Почему вы включите же кода JavaScript много ти тез? Какой 'grid.loader.js' вы используете? То, что находится внутри? Почему вы вставляете 'jqModal.js' и' jqDnR.js'? Если вы используете 'jquery.jqGrid.src.js' из jqGrid 4.0.0, вам не нужно включать' grid.loader.js', 'jqModal.js' и' jqDnR.js'. – Oleg

ответ

0

Вы не включены на странице один очень важный файл CSS:

<link rel="stylesheet" type="text/css" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" /> 

Кроме того вы включили то же JavaScript код много раз, что неправильно? Какой у вас grid.loader.js? То, что находится внутри? Вы можете открыть его с помощью любого текстового редактора. Почему вы вставляете jqModal.js и jqDnR.js? Если вы используете jquery.jqGrid.src.js от jqGrid 4.0.0, вам не нужно включать grid.loader.js, jqModal.js и jqDnR.js. Точный номер jquery.jqGrid.src.js может зависеть от списка модулей, которые вы выбрали при загрузке jqGrid. Вы можете открыть jquery.jqGrid.min.js и изучить строку комментария в начале файла. Резервная (полная) версия файла содержит следующие модули:

Модули: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; grid.filter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.grouping.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.tbltogrid.js; grid.jqueryui.js;

Таким образом, вы не должны включать одни и те же модули еще раз.

+0

Спасибо ... Получил это на работу .. –

+0

@gt: Добро пожаловать! В чем была главная проблема? Я могу вам помочь? – Oleg

Смежные вопросы