jqgrid +bootstap 样式

最新推荐文章于 2020-09-17 23:43:41 发布

pengSunny

最新推荐文章于 2020-09-17 23:43:41 发布

阅读量826

点赞数 2

文章标签： jqgrid +bootstap 环境配置和使用

本文链接：https://blog.csdn.net/PJQ228308339/article/details/80406680

版权

jgrid+bootstrap4.0 表格

Demo下载地址 bootstap

 <script type="text/javascript" src="jqgrid/jqgrid/js/i18n/grid.locale-cn.js"></script> 这是切换中文的文件js

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/javascript" src="jqgrid/js/jquery.min.js"></script>
    <script type="text/ecmascript" src="jqgrid/js/jquery-ui.min.js"></script>
    <!-- We support more than 40 localizations -->
    <script type="text/javascript" src="jqgrid/jqgrid/js/i18n/grid.locale-ja.js"></script> 
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="jqgrid/js/jquery.jqGrid.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
	<link rel="stylesheet" href="jqgrid/jqgrid/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
   <!-- <link rel="stylesheet" href="jqgrid/jqgrid/css/octicons.css"> -->
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet"  type="text/css"  media="screen" href="jqgrid/jqgrid/css/ui.jqgrid-bootstrap4.css" />
	<script>
		$.jgrid.defaults.width =500;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap4';
		$.jgrid.defaults.iconSet = "Octicons";
	</script>
	<script src="jqgrid/js/bootstrap.min.js"></script>
<!-- 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> -->
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Million Rows from a REST service</title>
</head>
<body>
    <body> 
        <div class="wode" style="margin-left: 18px">
         <div style="margin-top: 1%;" class="wode">
           <table id="list2"></table> 
            <div id="pager2"></div>
         </div>
        <div style="margin-top: 10px;margin-left: 115px; width: 150px;">
         <input type="button" value="選択" οnclick="getedit()">    
         <input type="button" value="取消" οnclick="getedit()">     
        </div>
        </div>
   
    <script type="text/javascript">
         $(function(){
       pageInit2();
});
function pageInit2(){
  jQuery("#list2").jqGrid(
      {
        datatype : "local",
		// styleUI : 'Bootstrap',
        height:310,
        colNames : ['社員CD', '社員名' ,'操作'],
        colModel : [ 
                     {name : 'code',index : 'code',width : 60,align:'center',sortable:false}, 
                     {name : 'name',index : 'name',width : 90,align:'center',sortable:false},
                     {name : '',index : 'caozuo',width : 90,align:'center',sortable:false, formatter : 'actions'}
                    
                   ],
        multiselect : false,
        caption : "社員の参照",            
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#pager2',
        // sortname : 'id',
        // sortorder : "desc",''
         shrinkToFit : true,
         autoScroll : true,
         rownumbers : true, 
         viewrecords : true,
         multipleSearch:true,
        // loadComplete: function(){
        // var grid = $("#list2");  
     //    var ids = grid.getDataIDs();  
     //    for (var i = 0; i < ids.length; i++) {  
     //        grid.setRowData ( ids[i], false, {height: 35+i*2} );  
     //    }  
        //  } 
      });
  var mydata = [ 
                   {code : "50040",name : "相原航"}, 
                   {code : "500169",name : "青木勝利"},
                   {code : "80052",name : "青木勝利"},
                   {code : "000434",name : "青木祐也"}, 
                   {code : "990136",name : "青木隆也"},
                   {code : "000320",name : "青野就佑"},
                   {code : "000396",name : "青山貴宗"},
                   {code : "980081",name : "青山貴宗"},
                   {code : "100277",name : "青山保弘"},
                   {code : "000318",name : "赤川友也"},
                   {code : "000319",name : "赤川友也"},
                   {code : "000320",name : "青山貴宗"}




               ];
  for ( var i = 0; i <= mydata.length; i++){
    jQuery("#list2").jqGrid('addRowData', i + 1, mydata[i]);
  }
    // var localData = {page: 1, total: 2, records: "2", rows: mydata};  data : newdata,   //  newdata 是符合格式要求的需要重新加载的数据 
   // $("#list2").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
    $("#list2").setGridParam({data : mydata, page:1 }).trigger("reloadGrid");


  // $("#list2").closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'hidden' });
   <!-- jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});-->


}
            
  function  getedit(){
  	   //得到选中的行
       var id=$('#list2').jqGrid('getGridParam','selrow');
        //根据得到选中的行拿到数据
         var rowData = $("#list2").jqGrid('getRowData',id);
         console.log(rowData);
  }


    
</script>
 </body>
</html>