bootstrap:tab和jqGrid的使用表格实现自适应（自用）

最新推荐文章于 2023-10-23 01:22:05 发布
最新推荐文章于 2023-10-23 01:22:05 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： java前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33416416/article/details/89360861
版权

参考：https://blog.csdn.net/qq122453418/article/details/79051823

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 选项�? &amp; 面板</title>
<meta name="keywords"
	content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技�?">

<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- jqgrid-->
<link href="css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
<link rel="stylesheet" href="js/plugins/layui/css/layui.css" media="all">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
<style type="text/css">
.differ {
	background-color: #e7fafe;
}
.search{
	margin-left: 20px;
}
</style>

<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
	top: 900px !important;
}
</style>

</head>

<body>
<div class="wrapper wrapper-content  animated fadeInRight" id="aaaa">
	<div class="tabs-container" id="ubub">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#tab-1"
				aria-expanded="true" id="lexing" class="grid_tab">类型</a></li>
			<li class=""><a data-toggle="tab" href="#tab-2"
				aria-expanded="false" id="xiangqing" class="grid_tab">类型详情</a></li>
		</ul>
		<div class="tab-content">
			<div id="tab-1" class="tab-pane active">
				<div class="jqgrid_box" id = "role">
						<table  class="table_list" id="table_list_2"></table>
						<div id="pager_list_2"></div>
					
				</div>
			</div>
			<div id="tab-2" class="tab-pane">
				<div class="jqgrid_box" id="role2">
						<table  class="table_list" id="table_list_3"></table>
						<div id="pager_list_3"></div>
					
				</div>
			</div>
		</div>


	</div>
</div>


	<!-- 全局js -->
	<script src="../static/js/jquery.min.js?v=2.1.4"></script>
	<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- layer javascript -->
	<script src="../static/js/plugins/layui/layui.all.js"></script>
	<script src="../static/js/layerShow.js"></script>

	<!-- Peity -->
	<script src="js/plugins/peity/jquery.peity.min.js"></script>
	<!-- jqGrid -->
	<script src="js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- 自定义js -->
	<script src="../static/js/doCommon.js"></script>
	<script src="js/content.js?v=1.0.0"></script>

	<script type="text/javascript"
		src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	<!--统计代码，可删除-->
	<script>
		var allIds = new Array();
		var width;
		$(document).ready(function() {
			

			$.jgrid.defaults.styleUI = 'Bootstrap';

			show();
			show2();

			jQuery("#table_list_2").navGrid('#pager_list_2', {
				edit : false,
				add : false,
				del : false,
				search : false,
				refresh : false
			});
			
			jQuery("#table_list_3").navGrid('#pager_list_3', {
				edit : false,
				add : false,
				del : false,
				search : false,
				refresh : false
			});
			

			// Add responsive to jqGrid
			$(window).bind('resize', function() {
				width= $('.jqGrid_wrapper').width();
				console.log(width);
				//width = $('.jqGrid_wrapper').width();
				$('#table_list_2').setGridWidth(width);								
				$('#table_list_3').setGridWidth(width);	
			});
			
			/* $(window).bind('resize', function() {				
				 //width = $('.jqGrid_wrapper').width();
				 $('#table_list_3').setGridWidth(width);			
			});  */

		});
		
		$('.grid_tab').on('shown.bs.tab',function(){
			$($(this).attr('href')).find('.table_list').jqGrid('setGridWidth',$($(this).attr('href')).find('.jqgrid_box').width());
		});

		//代码类型
		function show() {
			// Configuration for jqGrid Example 2
			var jqdata = [];
			var doCommon = new DoCommon();
			doCommon.transcode = 'PT0307';
			doCommon.excute(doCommon, function(data) {
				jqdata = data.jsonArray;
			});
			$("#table_list_2").jqGrid(
					{
						data : jqdata,
						datatype : "local",
						autowidth : true,
						shrinkToFit : true,
						height : 450,
						multiselect : true,//复选框 checkbox 
						//multiboxonly:true,//只能点击checkbox
						rowNum : 10,
						rowList : [ 10, 20, 50 ],
						colNames : [ '代码类型', '代码名称', '代码级次'],
						colModel : [ {
							name : 'DMLX',
							index : 'DMLX',
							editable : true,
							width : 60							
						}, {
							name : 'DMLXMC',
							index : 'DMLXMC',
							editable : true,
							width : 90
						}, {
							name : 'DMJC',
							index : 'DMJC',
							editable : true,
							width : 60
						}],
						toolbar:[true,"top"],
						pager : "#pager_list_2",
						viewrecords : true,
						caption : "代码类型",
						altRows : true,//单双行样式不同
						altclass : 'differ',//隔行变色样式
						add : true,
						edit : true,
						loadonce : false, //一次加载全部数据到客户端，由客户端进行排序。
						sortable : true,
						sortname : 'TRANSCODE', //设置默认的排序列
						sortorder : 'asc', //desc
						addtext : 'Add',
						edittext : 'Edit',
						onSelectAll : function(aRowids, status) { //全选事件

							if (status == true) {
								allIds = $("#table_list_2").jqGrid(
										'getGridParam', 'selarrrow');
							} else {
								allIds = $("#table_list_2").jqGrid(
										'getGridParam', 'selarrrow');
							}

						},
						onSelectRow : function(rowid, status) { //checkb事件

							if (status == true) {
								allIds = $("#table_list_2").jqGrid(
										'getGridParam', 'selarrrow');
							} else {
								allIds = $("#table_list_2").jqGrid(
										'getGridParam', 'selarrrow');
							}

						},

						hidegrid : false
					});
			
			var htmltar = ''+
			'<div>'+
			'<div style="width:30%;float: left;" class="layui-btn-group">'+
				'<button class="layui-btn" onclick="add();" id="bottun"><i class="layui-icon">&#xe654;</i>增加</button>'+
				'<button class="layui-btn" onclick="del();"><i class="layui-icon">&#xe640;</i>删除</button>'+
				'<button class="layui-btn" onclick="update();"><i class="layui-icon">&#xe642;</i>修改</button>'+
			'</div>'+
			'<div style="width:30%;float: left;">'+
			'<div class="layui-inline">'+
			'<input type="text" name="title" required lay-verify="required" placeholder="请输入代码类型" autocomplete="off" class="layui-input" id="search">'+
			'</div>'+
			
			'<button class="layui-btn search" onclick="search();"><i class="layui-icon">&#xe615;</i>搜索</button>'+
			
			'</div>'+
		'</div>';
			
			$("#t_table_list_2").append(htmltar);
			
		}
		
		//代码类型子类
		function show2() {
			// Configuration for jqGrid Example 2
			var jqdata = [];
			var doCommon = new DoCommon();
			doCommon.transcode = 'PT0309';
			doCommon.excute(doCommon, function(data) {
				jqdata = data.jsonArray;
			});
			$("#table_list_3").jqGrid(
					{
						data : jqdata,
						datatype : "local",
						autowidth : true,
						shrinkToFit : true,
						height : 450,
						multiselect : true,//复选框 checkbox 
						//multiboxonly:true,//只能点击checkbox
						rowNum : 10,
						rowList : [ 10, 20, 50 ],
						colNames : [ '代码年份', '代码类型', '代码键名','代码键值'],
						colModel : [ {
							name : 'YSNF',
							index : 'YSNF',
							editable : true,
							width : 60							
						}, {
							name : 'DMLX',
							index : 'DMLX',
							editable : true,
							width : 90
						}, {
							name : 'KEYNAME',
							index : 'KEYNAME',
							editable : true,
							width : 60
						},{
							name : 'KEYVALUE',
							index : 'KEYVALUE',
							editable : true,
							width : 60
						}],
						toolbar:[true,"top"],
						pager : "#pager_list_3",
						viewrecords : true,
						caption : "代码类型子类",
						altRows : true,//单双行样式不同
						altclass : 'differ',//隔行变色样式
						add : true,
						edit : true,
						loadonce : false, //一次加载全部数据到客户端，由客户端进行排序。
						sortable : true,
						sortname : 'TRANSCODE', //设置默认的排序列
						sortorder : 'asc', //desc
						addtext : 'Add',
						edittext : 'Edit',
						onSelectAll : function(aRowids, status) { //全选事件

							if (status == true) {
								allIds = $("#table_list_3").jqGrid(
										'getGridParam', 'selarrrow');
							} else {
								allIds = $("#table_list_3").jqGrid(
										'getGridParam', 'selarrrow');
							}

						},
						onSelectRow : function(rowid, status) { //checkb事件

							if (status == true) {
								allIds = $("#table_list_3").jqGrid(
										'getGridParam', 'selarrrow');
							} else {
								allIds = $("#table_list_3").jqGrid(
										'getGridParam', 'selarrrow');
							}

						},

						hidegrid : false
					});
			
			var htmltar = ''+
			'<div>'+
			'<div style="width:30%;float: left;" class="layui-btn-group">'+
				'<button class="layui-btn" onclick="add2();" id="bottun"><i class="layui-icon">&#xe654;</i>增加</button>'+
				'<button class="layui-btn" onclick="del2();"><i class="layui-icon">&#xe640;</i>删除</button>'+
				'<button class="layui-btn" onclick="update2();"><i class="layui-icon">&#xe642;</i>修改</button>'+
			'</div>'+
			'<div style="width:30%;float: left;">'+
			'<div class="layui-inline">'+
			'<input type="text" name="title" required lay-verify="required" placeholder="请输入代码类型" autocomplete="off" class="layui-input" id="search">'+
			'</div>'+
			
			'<button class="layui-btn search" onclick="search();"><i class="layui-icon">&#xe615;</i>搜索</button>'+
			
			'</div>'+
		'</div>';
			
			$("#t_table_list_3").append(htmltar);
			
		}
		
		
		function add() {
			var htmlcontent = ""+ 
			'<div class="ibox-content">'+
				 '<form class="form-horizontal" id = "addBean">'+
				 '<div class="form-group">'+
				 	 '<label class="col-sm-3 control-label">代码类型：</label>'+
				 	 '<div class="col-sm-8">'+
					 	 '<input type="text" placeholder="代码类型"  class="form-control" id="DMLX">'+
				 	 '</div>'+
			 	 '</div>'+
			 	 '<div class="form-group">'+
			 		 '<label class="col-sm-3 control-label">代码名称：</label>'+
			 		 '<div class="col-sm-8">'+
				 		 '<input type="text" placeholder="代码名称"  class="form-control" id="DMLXMC">'+
			 		 '</div>'+
		 		 '</div>'+
		 		 '<div class="form-group">'+
		 			 '<label class="col-sm-3 control-label">代码级次：</label>'+
		 			 '<div class="col-sm-8">'+
			 		 	 '<input type="text" placeholder="代码级次"  class="form-control" id="DMJC">'+
		 			 '</div>'+
	 			 '</div>'+	 			
				 '</form>' +
			 '</div>';
			 contentLayerhtml(htmlcontent, function(index) {
				addCon(index);
				
			});
			
		}
		
		function addCon(index) {
			var DMLX = $("#DMLX").val();
			var DMLXMC = $("#DMLXMC").val();
			var DMJC = $("#DMJC").val();
			var consl = /^[0-9]*$/;
			if ( $.trim(DMLX) == "" || DMLX == null || $.trim(DMLXMC) == "" || DMLXMC == null|| $.trim(DMJC) == "" || DMJC == null) {
				showMsg("请补全信息");
				return false;

			}  else {
				var info = [
						{
						"DMLX":DMLX ,
						"DMLXMC":DMLXMC ,
						"DMJC":DMJC 						
						}
					];
				var doCommon = new DoCommon();
				doCommon.info = info;
				//doCommon.tj = "name like '%d%'";
				doCommon.transcode = "PT0306";
				doCommon.excute(doCommon,function(data) {
					
					if (data.code==1) {
						showMsg("录入成功！");
						var jqdata = [];
						var doCommon = new DoCommon();
						doCommon.transcode = 'PT0307';
						doCommon.excute(doCommon, function(data) {
							jqdata = data.jsonArray;
							$("#table_list_2").jqGrid('clearGridData'); //清空表格
							$("#table_list_2").jqGrid('setGridParam', { // 重新加载数据
								data : jqdata,
								datatype : "local",
								page : 1
							}).trigger("reloadGrid");
						});
						
						layer.close(index);
					}else{
						showMsg("录入失败！");
					}
					
				});
				
				
			}
		} 
		
		function del() {
			if (allIds.length>0) {
				showConfirm('确定删除?', '删除', function() {
					var datas= jqGridRowData("#table_list_2");
					var RID  = new Array();
					for (var i = 0; i < datas.length; i++) {
						
						var TRANSCODEJson = {
							"RID":datas[i].RID
						}
						RID.push(TRANSCODEJson);
					}
					var doCommon = new DoCommon();
					doCommon.info = RID;
					//doCommon.tj = "name like '%d%'";
					doCommon.transcode = "PT0107";
					doCommon.excute(doCommon,function(fdata) {
						if (fdata.code==1) {
							var jqdata = [];
							var doCommon = new DoCommon();
							doCommon.transcode = 'PT0105';
							doCommon.excute(doCommon, function(redata) {
								jqdata = redata.jsonArray;
								$("#table_list_2").jqGrid('clearGridData'); //清空表格
								$("#table_list_2").jqGrid('setGridParam', { // 重新加载数据
									data : jqdata,
									datatype : "local",
									page : 1
								}).trigger("reloadGrid");
							});
							showMsg("删除成功！");
							allIds = [];
						}else{
							showMsg("删除失败！");
						}
						//layer.close(index);
						
					});
					
				});
			}else {
				layer.msg('请选择要删除的对象！');
			}
		}
		
		
		
		function update() {
			if (allIds.length==0) {
				showMsg("请选择！");
			}else if (allIds.length>1) {
				showMsg("只能选择一个！");
			}else{
				var datas= jqGridRowData("#table_list_2");
				var id=datas[0].DMLX;
				var list ;
				var doCommon = new DoCommon();
				doCommon.tj = "DMLX = '"+id+"'";
				doCommon.transcode = 'PT0307';
				doCommon.excute(doCommon, function(data) {
					list = data.list;
				});
				var htmlcontent = ""+ 
				'<div class="ibox-content">'+
					 '<form class="form-horizontal" id = "addBean">'+
					 '<div class="form-group">'+
						 '<label class="col-sm-3 control-label">代码类型：</label>'+
						 '<div class="col-sm-8">'+
							 '<input type="text" placeholder="代码类型"  class="form-control" id="TRANSCODE" readonly="readonly" value="'+list[0].DMLX+'">'+
						 '</div>'+
					 '</div>'+
					 '<div class="form-group">'+
					 	 '<label class="col-sm-3 control-label">代码名称：</label>'+
					 	 '<div class="col-sm-8">'+
						 	 '<input type="text" placeholder="代码名称"  class="form-control" id="TRANSNAME" value="'+list[0].DMLXMC+'">'+
					 	 '</div>'+
				 	 '</div>'+
				 	 '<div class="form-group">'+
				 		 '<label class="col-sm-3 control-label">代码级次：</label>'+
				 		 '<div class="col-sm-8">'+
					 		 '<input type="text" placeholder="代码级次"  class="form-control" id="TABLES" readonly="readonly" value="'+list[0].DMJC+'">'+
				 		 '</div>'+
			 		 '</div>'+
					 '</form>' +
				 '</div>';
				 contentLayerhtml(htmlcontent, function(index) {
					 updateCon(index,id);
					
				});
			}
			
			
		}
		
		function updateCon(index,id) {
			var TRANSCODE = $("#TRANSCODE").val();
			var TRANSNAME = $("#TRANSNAME").val();
			var TABLES = $("#TABLES").val();
			var consl = /^[0-9]*$/;
			if ($.trim(TRANSCODE) == "" || TRANSCODE == null || $.trim(TRANSNAME) == ""
					|| TRANSNAME == null
					|| $.trim(TABLES) == "" || TABLES == null) {
				showMsg("请补全信息");
				return false;

			}  else {
				var info = [
						{"DMLX":TRANSCODE ,
						"DMLXMC":TRANSNAME ,
						"DMJC":TABLES 					
						}
					];
				var doCommon = new DoCommon();
				doCommon.info = info;
				doCommon.tj = "DMLX='"+TRANSCODE+"'";
				doCommon.transcode = "PT0308";
				doCommon.excute(doCommon,function(data) {
					
					if (data.code==1) {
						showMsg("修改成功！");
						var jqdata = [];
						var doCommon = new DoCommon();
						doCommon.transcode = 'PT0307';
						doCommon.excute(doCommon, function(data) {
							jqdata = data.jsonArray;
							$("#table_list_2").jqGrid('clearGridData'); //清空表格
							$("#table_list_2").jqGrid('setGridParam', { // 重新加载数据
								data : jqdata,
								datatype : "local",
								page : 1
							}).trigger("reloadGrid");
						});
						allIds = [];
						layer.close(index);
					}else{
						showMsg("修改失败！");
					}
					
				});
				
				
			}
		} 
		function search() {
			var search = $("#search").val();
			var jqdata = [];
			var doCommon = new DoCommon();
			doCommon.transcode = 'PT0307';
			doCommon.tj = "DMLX = '"+search+"'";
			doCommon.excute(doCommon, function(data) {
				jqdata = data.jsonArray;
				$("#table_list_2").jqGrid('clearGridData'); //清空表格
				$("#table_list_2").jqGrid('setGridParam', { // 重新加载数据
					data : jqdata,
					datatype : "local",
					page : 1
				}).trigger("reloadGrid");
			});
		}
		
		
		
		//表单2&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
			/* function add2() {
			var htmlcontent = ""+ 
			'<div class="ibox-content">'+
				 '<form class="form-horizontal" id = "addBean">'+
				 '<div class="form-group">'+
				 	 '<label class="col-sm-3 control-label">代码年份：</label>'+
				 	 '<div class="col-sm-8">'+
					 	 '<input type="text" placeholder="代码年份"  class="form-control" id="YSNF">'+
				 	 '</div>'+
			 	 '</div>'+
			 	 '<div class="form-group">'+
			 		 '<label class="col-sm-3 control-label">代码类型：</label>'+
			 		 '<div class="col-sm-8">'+
				 		 '<input type="text" placeholder="代码类型"  class="form-control" id="DMLX">'+
			 		 '</div>'+
		 		 '</div>'+
		 		 '<div class="form-group">'+
		 			 '<label class="col-sm-3 control-label">代码键名：</label>'+
		 			 '<div class="col-sm-8">'+
			 		 	 '<input type="text" placeholder="代码键名"  class="form-control" id="KEYNAME">'+
		 			 '</div>'+
	 			 '</div>'+	
	 			 
	 			 '<div class="form-group">'+
	 			 	'<label class="col-sm-3 control-label">代码键值：</label>'+
	 			 	'<div class="col-sm-8">'+
		 		 	 '<input type="text" placeholder="代码键值"  class="form-control" id="KEYVALUE">'+
	 			 	'</div>'+
 				 '</div>'+		 			 
				 '</form>' +
			 '</div>';
			 contentLayerhtml(htmlcontent, function(index) {
				addCon2(index);
				
			});
			
		}
		
		function addCon2(index) {
			var YSNF = $("#YSNF").val();
			var DMLX = $("#DMLX").val();
			var KEYNAME = $("#KEYNAME").val();
			var KEYVALUE = $("#KEYVALUE").val();
			var consl = /^[0-9]*$/;
			if ( $.trim(YSNF) == "" || YSNF == null || $.trim(DMLX) == "" || DMLX == null|| $.trim(KEYNAME) == "" || KEYNAME == null|| $.trim(KEYVALUE) == "" || KEYVALUE == null) {
				showMsg("请补全信息");
				return false;

			}  else {
				var info = [
						{
						"YSNF":YSNF ,
						"DMLX":DMLX ,
						"KEYNAME":KEYNAME,
						"KEYVALUE":KEYVALUE 
						}
					];
				var doCommon = new DoCommon();
				doCommon.info = info;
				//doCommon.tj = "name like '%d%'";
				doCommon.transcode = "PT0312";
				doCommon.excute(doCommon,function(data) {
					
					if (data.code==1) {
						showMsg("录入成功！");
						var jqdata = [];
						var doCommon = new DoCommon();
						doCommon.transcode = 'PT0309';
						doCommon.excute(doCommon, function(data) {
							jqdata = data.jsonArray;
							$("#table_list_3").jqGrid('clearGridData'); //清空表格
							$("#table_list_3").jqGrid('setGridParam', { // 重新加载数据
								data : jqdata,
								datatype : "local",
								page : 1
							}).trigger("reloadGrid");
						});
						
						layer.close(index);
					}else{
						showMsg("录入失败！");
					}
					
				});
				
				
			}
		} 
		
		function del2() {
			if (allIds.length>0) {
				showConfirm('确定删除?', '删除', function() {
					var datas= jqGridRowData("#table_list_3");
					var RID  = new Array();
					for (var i = 0; i < datas.length; i++) {
						
						var TRANSCODEJson = {
							"RID":datas[i].DMLX
						}
						RID.push(TRANSCODEJson);
					}
					var doCommon = new DoCommon();
					doCommon.info = RID;
					//doCommon.tj = "name like '%d%'";
					doCommon.transcode = "PT0311";
					doCommon.excute(doCommon,function(fdata) {
						if (fdata.code==1) {
							var jqdata = [];
							var doCommon = new DoCommon();
							doCommon.transcode = 'PT0309';
							doCommon.excute(doCommon, function(redata) {
								jqdata = redata.jsonArray;
								$("#table_list_3").jqGrid('clearGridData'); //清空表格
								$("#table_list_3").jqGrid('setGridParam', { // 重新加载数据
									data : jqdata,
									datatype : "local",
									page : 1
								}).trigger("reloadGrid");
							});
							showMsg("删除成功！");
							allIds = [];
						}else{
							showMsg("删除失败！");
						}
						//layer.close(index);
						
					});
					
				});
			}else {
				layer.msg('请选择要删除的对象！');
			}
		}
		
		
		
		function update2() {
			if (allIds.length==0) {
				showMsg("请选择！");
			}else if (allIds.length>1) {
				showMsg("只能选择一个！");
			}else{
				var datas= jqGridRowData("#table_list_3");
				var id=datas[0].DMLX;
				var list ;
				var doCommon = new DoCommon();
				doCommon.tj = "DMLX = '"+id+"'";
				doCommon.transcode = 'PT0309';
				doCommon.excute(doCommon, function(data) {
					list = data.list;
				});
				var htmlcontent = ""+ 
				'<div class="ibox-content">'+
					 '<form class="form-horizontal" id = "addBean">'+
					 '<div class="form-group">'+
						 '<label class="col-sm-3 control-label">代码年份：</label>'+
						 '<div class="col-sm-8">'+
							 '<input type="text" placeholder="代码年份"  class="form-control" id="TRANSCODE" readonly="readonly" value="'+list[0].YSNF+'">'+
						 '</div>'+
					 '</div>'+
					 '<div class="form-group">'+
					 	 '<label class="col-sm-3 control-label">代码类型：</label>'+
					 	 '<div class="col-sm-8">'+
						 	 '<input type="text" placeholder="代码类型"  class="form-control" id="TRANSNAME" value="'+list[0].DMLX+'">'+
					 	 '</div>'+
				 	 '</div>'+
				 	 
				 	 '<div class="form-group">'+
				 		 '<label class="col-sm-3 control-label">代码键名：</label>'+
				 		 '<div class="col-sm-8">'+
					 		 '<input type="text" placeholder="代码键名"  class="form-control" id="TABLES" readonly="readonly" value="'+list[0].KEYNAME+'">'+
				 		 '</div>'+
			 		 '</div>'+
			 	 	 
			 		 '<div class="form-group">'+
			 		 '<label class="col-sm-3 control-label">代码键值：</label>'+
			 		 '<div class="col-sm-8">'+
				 		 '<input type="text" placeholder="代码键值"  class="form-control" id="KEYVALUE"  value="'+list[0].KEYVALUE+'">'+
			 		 '</div>'+
		 			 '</div>'+
			 		 
			 		 '</form>' +
				 '</div>';
				 contentLayerhtml(htmlcontent, function(index) {
					 updateCon2(index,id);
					
				});
			}
			
			
		}
		
		function updateCon2(index,id) {
			var TRANSCODE = $("#TRANSCODE").val();
			var TRANSNAME = $("#TRANSNAME").val();
			var TABLES = $("#TABLES").val();
			var KEYVALUE = $("#KEYVALUE").val();
			var consl = /^[0-9]*$/;
			if ($.trim(TRANSCODE) == "" || TRANSCODE == null || $.trim(TRANSNAME) == ""
					|| TRANSNAME == null
					|| $.trim(TABLES) == "" || TABLES == null|| $.trim(KEYVALUE) == "" || KEYVALUE == null) {
				showMsg("请补全信息");
				return false;

			}  else {
				var info = [
						{"YSNF":TRANSCODE ,
						"DMLX":TRANSNAME ,
						"KEYNAME":TABLES,
						"KEYVALUE":KEYVALUE 
						}
					];
				var doCommon = new DoCommon();
				doCommon.info = info;
				doCommon.tj = "DMLX='"+TRANSNAME+"'";
				doCommon.transcode = "PT0310";
				doCommon.excute(doCommon,function(data) {
					
					if (data.code==1) {
						showMsg("修改成功！");
						var jqdata = [];
						var doCommon = new DoCommon();
						doCommon.transcode = 'PT0309';
						doCommon.excute(doCommon, function(data) {
							jqdata = data.jsonArray;
							$("#table_list_3").jqGrid('clearGridData'); //清空表格
							$("#table_list_3").jqGrid('setGridParam', { // 重新加载数据
								data : jqdata,
								datatype : "local",
								page : 1
							}).trigger("reloadGrid");
						});
						allIds = [];
						layer.close(index);
					}else{
						showMsg("修改失败！");
					}
					
				});
				
				
			}
		} 
		function search2() {
			var search = $("#search").val();
			var jqdata = [];
			var doCommon = new DoCommon();
			doCommon.transcode = 'PT0309';
			doCommon.tj = "DMLX = '"+search+"'";
			doCommon.excute(doCommon, function(data) {
				jqdata = data.jsonArray;
				$("#table_list_3").jqGrid('clearGridData'); //清空表格
				$("#table_list_3").jqGrid('setGridParam', { // 重新加载数据
					data : jqdata,
					datatype : "local",
					page : 1
				}).trigger("reloadGrid");
			});
		} */
	</script>
	
</body>

</html>

才华高于颜值
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jqGrid的自适应表格
12-27
jqGrid是基于jquery的一个表格插件，demo中可自适应窗口大小，且单元格数据较多时，可单行显示
数据表格JqGrid自适应列宽度
04-16
NULL 博文链接：https://vipshow.iteye.com/blog/1812381
jqgrid调整宽度自适应
qq_41038929的博客
06-28 5020
//当浏览器调整大小时，调整jqGrid的大小 $(window).bind('resize', function () { $("#gridList").setGridWidth($('.col-md-12').width()); }).trigger('resize'); $gridList.dataGrid({ url: "Handler/AdminHandle...
Bootstrap嵌入jqGrid，使你的table牛逼起来
热门推荐
沉默王二
05-04 4万+
Bootstrap嵌入jqGrid，使你的table牛逼起来
bootstrap table表格解决文本值太大，表格无法自适应 解决方案
qq_42392337的博客
05-09 2432
table标签外层div标签加上table-responsive属性 th以及td标签加上overflow:hidden;text-overflow:ellipsis;white-space:nowrap;，另外这里可以根据数据长度自定义设置每列的宽度，不然超过宽度的部分会默认显示为省略号 <div class="table-responsive"> <table class="table table-hover table-bordered" style="word-wrap:br.
BootStrap table表格插件自适应固定表头(超好用)
11-22
首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便...还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，
BootStrap和jQuery相结合实现可编辑表格
10-22
主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下
bootstrap实现tab选项卡切换
10-14
为了实现选项卡的切换，Bootstrap使用了jQuery库，所以确保在页面中引入了jQuery和Bootstrap的JS文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/bootstrap....
使用jQuery和Bootstrap实现多层、自适应模态窗口
12-09
本篇实践一个多层模态窗口，而且是自适应的。 点击页面上的一个按钮，弹出第一层自适应模态窗口。 在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即...
Angualrjs和bootstrap相结合实现数据表格table
10-20
主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
jqGrid随窗口大小变化自适应大小的示例代码
09-04
本篇文章主要是对jqGrid随窗口大小变化自适应大小的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
精简强大的自适应TAB选项卡！
12-10
插件描述：Tab选项卡tabulous.js. 参考示例：http://www.jq22.com/jquery-info5066
Bootstrap树型表格和多标题表格
06-23
从bootstrap修改出来的与ext treegrid相似的插件，能当树形和普通多标题插件用，自带行内编辑
bootStrap自适应如何使用
最新发布
weixin_54048131的博客
10-23 919
【代码】bootStrap自适应如何使用。
jquery tab 内嵌 iframe 自适应高度
sharpwave的博客
09-18 333
引入 jqurey tab 的js [code="java"] [/code] 在调用 tabs方法时 写 show 方法 在里面 动态改变 iframe 里的高度 [code="java"] $("#tabs").tabs({ show:function(obj,tab){ $(tab.panel).find('IFRAME').attr("heigh...
bootstraptable列宽自适应内容_多列列表框行高和列宽的自适应调整
weixin_33441139的博客
12-24 2631
LabVIEW：2015在使用多列列表框(Multicolumn Listbox)时，有时不同列显示的内容长度不一致，为了显示更加美观，并节省界面显示空间，需要实现多列列表框的行高和列宽的自适应调整，那么如何实现呢？行高自适应调整行高自适应调整无需编写程式，只需设置即可，行高的调整主要是针对多行输入，那么首先需要设置“允许多行输入”，如下图所示：其次要勾选”自动调整行高”，如下图所示：完...
bootstrapTable jqGrid使用总结
qq_18932003的博客
07-29 546
q前端
可以使用Bootstrap框架实现自适应轮播图
06-12
是的，可以使用Bootstrap框架来实现自适应轮播图。Bootstrap提供了Carousel组件，可以快速轻松地创建自适应的轮播图。 以下是实现自适应轮播图的步骤： 1. 首先，需要在HTML文件中引入Bootstrap的CSS和JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值