jqgrid没有显示在html页面中

时间:2013-11-23 11:50:44

标签: jqgrid

这是我在此页面中的页面代码jqgrid没有显示output.please为什么这个错误会给你发送解释代码..

    <link rel="stylesheet" href="css/boilerplate.css" />
    <link rel="stylesheet" href="css/global.css" />    
    <link rel="stylesheet" href="css/splash.css" />    

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/redmond/jquery-ui.css">    
    <link rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
    <link rel="stylesheet" href="css/ui.jqgrid.css"> 

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script src="js/grid.locale-en.js" type="text/javascript"></script>    
    <script src="js/grid-search.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>

// Jqgrid脚本代码在这里

   <script>
var mydata =[
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0457",employe:"naveena",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0458",employe:"anil",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"}]



$(document).ready(function() {
        setupGrid();
       option();
        attachDeleteButton();
    });     

    //Build radio button
function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="Female"';
    var breakline = '/>Female<br>';
    var naradio = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="receivednaradio" value="Male"';
    var endnaradio = '/>Male<br>';
    if (value == 'Male') {
        var radiohtml = receivedradio + 'checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'Female') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};





function dataSentOK(){
    jQuery("#navgrid4").jqGrid().trigger("reloadGrid");
}

 function option() {
$(this).find("table.group td.operators>select.selectopts")
    .append("<option value='xx'>xxx</option>");

}

function setupGrid(){
jQuery("#navgrid4").jqGrid({
url:'editing.php?q=1',
data:mydata,
postData: sopt,
datatype:"local",
colNames:['Id','EmployeeName','gender','Role','Department','JoineDate','Description','gender','description','joinedate'],

    colModel:[
    {name:'id',index:'id', width:55, editable:false,editrules:{required:true},searchoptions:{sopt: ['eq', 'ne']}},            
    {name:'employe',index:'employe', width:90,editable:true,formoptions:{rowpos:2,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},editrules:{required:true}},
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:4,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'role',index:'role', width:100,editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:3,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'department',index:'department', width:80, align:"right",editable:true,edittype:"select",
        editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
        formoptions:{rowpos:5,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }},
    {name:'joinedate',index:'joinedate', width:80,
        editable:true,
        editoptions:{size:12,
            dataInit:function(el){
                $(el).datepicker({dateFormat:'yy-mm-dd '});
            },
            defaultValue: function(){
                var currentTime = new Date();
                var month = parseInt(currentTime.getMonth() + 1);
                month = month <= 9 ? "0"+month : month;
                var day = currentTime.getDate();
                day = day <= 9 ? "0"+day : day;
                var year = currentTime.getFullYear();
                return year+"-"+month + "-"+day;                
            }
        },
        formoptions:{ rowpos:6,elmsuffix:"  yyyy-mm-dd", elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},
        editrules:{required:true}
    },      
    {name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:7,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:8,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},
    {name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:9,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}},

{name:'joinedate',index:'joinedate',width:80,             编辑:真的,             editoptions:{尺寸:12,                 dataInit:功能(EL){                     $(el).datepicker({dateFormat:'yy-mm-dd'});                 },                 defaultValue:function(){                     var currentTime = new Date();                     var month = parseInt(currentTime.getMonth()+ 1);                     月=月&lt; = 9? “0”+月:月;                     var day = currentTime.getDate();                     day = day&lt; = 9? “0”+天:天;                     var year = currentTime.getFullYear();                     返回年份+“ - ”+月+“ - ”+日;
                }             },             formoptions:{rowpos:10,elmsuffix:“yyyy-mm-dd”,elmprefix:“”},             editrules:{要求:真正}         },
    ]         的rowNum:10,         rowList:[10,20,30],         pager:'#pagernav4',         sortname:'employe',         mtype:'GET',         viewrecords:是的,         sortorder:“desc”,
        标题:“导航器示例”,         editurl: “someurl.php”         多选:真实,         高度:350,
        宽度:600         });     jQuery(“#navgrid4”)。jqGrid('navGrid','#pagernav4',{view:true,add:true,search:true,multipleSearch:true,edit:true},     {jqModal:true,checkOnUpdate:true,savekey:[true,13],navkeys:[true,38,40],checkOnSubmit:true,reloadAfterSubmit:false,closeOnEscape:true,bottominfo:“标有(*)的字段是必需的“}     );     }  

//正文部分代码

<section>       <!--SLODER SECTION STARTS HERE-->
       <div class="content">    <!--CONTENT STARTS HERE-->
         <div class="content-left">      <!--CONTENT-LEFT STARTS HERE-->
            <div id="sub-content-left">
               <ul id="sub-contentul">
                 <li id="empmgmt"><a href="#" id="empmgmt">Employee Management</a></li>
                 <li id="rolemgmt"><a href="#">Role Management</a></li>
                 <li id="deptmgmt"><a href="#">Department Management</a></li>
                 <li id="holidays"><a href="#">Holidays</a></li>
                 <li id="updates"><a href="#">Updates</a></li>
                 <li id="reports"><a href="#">Reports</a></li>
                 <li id="attendence"><a href="#">Attendence</a></li>
               </ul> 
            </div> 
            <div id="sub-content-right">
               <div id="empmgmt-div">
                  <div class="centreDiv">    
                    <!-- jqGrid will be injected into this DIV-->    
                    <div>
                        <table id="navgrid4"></table>
                        <div id="pagernav4"></div>          
                    </div>
                </div>  
               </div>
               <div id="rolemgmt-div">
                  <p>Role Management</p>
               </div>
               <div id="deptmgmt-div">
                  <p>Department Management</p>
               </div>
               <div id="holidays-div">
                  <p>Holidays</p>
               </div>
               <div id="updates-div">
                  <p>Updates</p>
               </div>
               <div id="reports-div">
                  <p>Reports</p>
               </div>
               <div id="attendence-div">
                  <p>Attendence</p>
               </div>
            </div>
         </div>       <!--CONTENT-LEFT ENDS HERE-->
         <div class="content-right">       <!--CONTENT-RIGHT STARTS HERE-->
            <div class="bday-box">
              <p class="bday-name">Birthdays List</p>
            </div>
            <div class="scroll-box">
              <p class="bday-name">Scrolling Updates</p>
            </div>
            <div class="calender-box">
              <p class="bday-name">Calender Box</p>
            </div>
         </div>      <!--CONTENT-RIGHT ENDS HERE-->

       </div>        <!--CONTENT ENDS HERE-->

    </section>      <!--SLIDER SECTION ENDS HERE-->

1 个答案:

答案 0 :(得分:0)

使用 firebug 插件尝试 firefox浏览器,以便找到问题的根本原因。

http://www-scf.usc.edu/~csci571/Special/Tutorials/firebug-571.pdf