(Jquery功能篇) JqGrid表单控件实例代码

你猜阅读：697 2021-04-01 10:21:41 评论：0
截图效果展示：
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" 
	pageEncoding="UTF-8"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     
    <title>订单信息分页</title>	 
	<!--加载jquery核心文件  --> 
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>  
	<!--加载jqgrid核心文件  --> 
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
	<!--加载jquery-ui核心文件  --> 
	<script type="text/javascript" src="js/jquery-ui.js"></script> 
	<!--加载JqGrid文件  --> 
	 <script type="text/javascript" src="js/grid.locale-cn.js"></script> 
	 <!--加载jpgrid ui的样式文件  --> 
	 <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
	 <!--加载jquery ui的样式文件  --> 
	 <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css" /> 
	 <!--加载jquery themes的样式文件  --> 
	 <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.theme.css" /> 
	 
     <script> 
     		$(function() 
    { 
        $("#gridTable").jqGrid({ 
                datatype: "local", 
                height: 250, 
                colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'], 
                colModel:[ 
                        {name:'id',index:'id', width:60, sorttype:"int"}, 
                        {name:'userName',index:'userName', width:90}, 
                        {name:'gender',index:'gender', width:90}, 
                        {name:'email',index:'email', width:125,sorttype:"string"}, 
                        {name:'QQ',index:'QQ', width:100},                 
                        {name:'mobilePhone',index:'mobilePhone', width:120},                 
                        {name:'birthday',index:'birthday', width:100, sorttype:"date"}                 
                ], 
                sortname:'id', 
                sortorder:'asc', 
                viewrecords:true, 
                rowNum:10, 
                rowList:[10,20,30], 
                pager:"#gridPager", 
                caption: "第一个jqGrid例子" 
        }).navGrid('#pager2',{edit:false,add:false,del:false}); 
        var mydata = [ 
                {id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"}, 
                {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"}, 
                {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"}, 
                {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"}, 
                {id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"}, 
                {id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"}, 
                {id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"}, 
                {id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"}, 
                {id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"} 
                ]; 
        for(var i=0;i<=mydata.length;i++) 
                jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]); 
        }); 
     </script> 
	 
 
  </head> 
   
  <body>    
       <table id="gridTable"></table> 
        <div id="gridPager"></div> 
      
        
  </body> 
</html>
标签:jquery
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。