设置页面列表数据js

最新推荐文章于 2022-10-28 19:46:05 发布
最新推荐文章于 2022-10-28 19:46:05 发布
阅读量447 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44107068/article/details/104344295
版权 

//设置页面列表数据
//增加自定义fieldset，页面中存在多个数据表时使用
function showdatalist(sethtmldemo,data,fieldset){
	if(!sethtmldemo){
		console.log('设置元素不存在！');
		return;
	}
	
	if(data && typeof data=='object'){
			var editurl=$(sethtmldemo).data('editurl');
			var dellurl=$(sethtmldemo).data('dellurl');
			var idfield=$(sethtmldemo).data('idfield')?$(sethtmldemo).data('idfield'):'id';//行双击编辑查主键
			var customurl=$(sethtmldemo).data('customurl');//列表项自定义链接
			var customtitle=$(sethtmldemo).data('customtitle')?$(sethtmldemo).data('customtitle'):'查看详细';//列表项自定义链接窗口名称
			var customkeyfield=$(sethtmldemo).data('customkeyfield')?$(sethtmldemo).data('customkeyfield'):'id';//列表项自定义链接键名
			var customidfield=$(sethtmldemo).data('customidfield')?$(sethtmldemo).data('customidfield'):'id';//列表项自定义链接键值
			
			var customurl2=$(sethtmldemo).data('customurl2');//列表项自定义链接
			var customtitle2=$(sethtmldemo).data('customtitle2')?$(sethtmldemo).data('customtitle2'):'查看详细';//列表项自定义链接窗口名称
			var customkeyfield2=$(sethtmldemo).data('customkeyfield2')?$(sethtmldemo).data('customkeyfield2'):'id';//列表项自定义链接键名
			var customidfield2=$(sethtmldemo).data('customidfield2')?$(sethtmldemo).data('customidfield2'):'id';//列表项自定义链接键值
			
			var buttontitle=$(sethtmldemo).data('buttontitle');//按钮1标题
			var buttonclass=$(sethtmldemo).data('buttonclass')?$(sethtmldemo).data('buttonclass'):'selectitem';//按钮1class
			var buttonid=$(sethtmldemo).data('buttonid')?$(sethtmldemo).data('buttonid'):'id';//按钮1data-id
			
			var buttontitle2=$(sethtmldemo).data('buttontitle2');//按钮2标题
			var buttonclass2=$(sethtmldemo).data('buttonclass2')?$(sethtmldemo).data('buttonclass2'):'selectitem2';//按钮2class
			var buttonid2=$(sethtmldemo).data('buttonid2')?$(sethtmldemo).data('buttonid2'):'id';//按钮2data-id
			
			var buttontitle3=$(sethtmldemo).data('buttontitle3');//按钮3标题
			var buttonclass3=$(sethtmldemo).data('buttonclass3')?$(sethtmldemo).data('buttonclass3'):'selectitem3';//按钮3class
			var buttonid3=$(sethtmldemo).data('buttonid3')?$(sethtmldemo).data('buttonid3'):'id';//按钮3data-id
			
			var notseturl=$(sethtmldemo).data('notseturl')?true:false;//是否需要替换页面地址
			
			var htmlstr='';
			var fieldsarray=[];
			var classarray=[];//样式定义
			fieldset=fieldset || '#fieldset';//定义#fieldset
			//行颜色和提示
			//格式为json字符串如，data-checkjson='{"checkfield":"orderparts","showinf":[{"color":"#555","title":""},{"color":"#999","title":"当前工单配件正在订购中!"},{"color":"blue","title":"当前工单配件已入库!"}]}'
			var checkjson=$(fieldset).data('checkjson');
			var fieldset=$(fieldset+' th');//字段元素
				$(fieldset).each(function(){
					fieldsarray.push($(this).data('field'));
					classarray.push($(this).data('class')?$(this).data('class'):'');
				});
			if(data.state!='fail' && fieldsarray.length){
				for(var i in data.lists){
					htmlstr+='<tr';
					if(checkjson){
						var getitem=data.lists[i][checkjson['checkfield']];
						var tempstring=' style="color:'+checkjson['showinf'][getitem]['color']+'"; title="'+checkjson['showinf'][getitem]['title']+'"';
						htmlstr+=tempstring;
					}
					if(!editurl){
						htmlstr+='>';
					}else{
						htmlstr+=' class="tr_edit_item" data-id="'+data.lists[i][idfield]+'">';
					}
					
					for(j = 0,len=fieldsarray.length; j < len; j++) {
						//循环显示设置字段
						var item=data.lists[i];
						var fielditem=fieldsarray[j];
						htmlstr+='<td>';
						if(fielditem=='checkbox'){
							//如果是复选
							htmlstr+='<input type="checkbox" class="J_check" data-yid="J_check_y" data-xid="J_check_x" name="ids[]" value="'+item.id+'"></td>';
							continue;
						}
						if(fielditem=='opt'){
							//如果是操作按钮
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a></td>';
							continue;
						}
						if(fielditem=='opt_no_edit'){
							//如果是操作按钮
							htmlstr+='<a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a></td>';
							continue;
						}
						if(fielditem=='opt_check_del'){
							//如果是操作按钮(管理员密码验证删除)
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'" class="check_del"  >删除</a></td>';
							continue;
						}
						if(fielditem=='opt_admincheck_del'){
							//如果是操作按钮(超级管理员密码验证删除)
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'" class="admincheck_del"  >删除</a></td>';
							continue;
						}
						if(fielditem=='opt_soft_del'){
							//如果是操作按钮(软删除)
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'&soft_del=1" class="J_ajax_del" data-msg="删除后可还原！">删除</a></td>';
							continue;
						}
						if(fielditem=='opt_real_del'){
							//如果是操作按钮(真删除)
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a></td>';
							continue;
						}
						if(fielditem=='opt_only_del'){
							//只有真删除
							htmlstr+='<a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a></td>';
							continue;
						}
						if(fielditem=='opt_only_soft_del'){
							//只有软删除
							htmlstr+='<a href="'+dellurl+'&id='+item.id+'&soft_del=1" class="J_ajax_del" data-msg="删除后可还原！">删除</a></td>';
							continue;
						}
						
						
						if(fielditem=='opt_customurl'){
							//如果是操作按钮(加自定义链接)
							htmlstr+='<a href="javascript:;" class="editbtn" data-id="'+item.id+'">修改</a><a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a>';
							if(customurl){
								htmlstr+='<a href="javascript:;" class="custombtn" data-customkeyfield="'+customkeyfield+'" data-id="'+item[customidfield]+'">'+customtitle+'</a>';
							}
							if(customurl2){
								htmlstr+='<a href="javascript:;" class="custombtn2" data-customkeyfield="'+customkeyfield2+'" data-id="'+item[customidfield2]+'">'+customtitle2+'</a>';
							}
							htmlstr+='</td>';
							continue;
						}
						
						if(fielditem=='opt_noedit_customurl'){
							//如果是操作按钮(加自定义链接,没有编辑按钮)
							htmlstr+='<a href="'+dellurl+'&id='+item.id+'" class="J_ajax_del" data-msg="删除后不可还原！">删除</a>';
							if(customurl){
								htmlstr+='<a href="javascript:;" class="custombtn" data-customkeyfield="'+customkeyfield+'" data-id="'+item[customidfield]+'">'+customtitle+'</a>';
							}
							if(customurl2){
								htmlstr+='<a href="javascript:;" class="custombtn2" data-customkeyfield="'+customkeyfield2+'" data-id="'+item[customidfield2]+'">'+customtitle2+'</a>';
							}
							htmlstr+='</td>';
							continue;
						}
						if(fielditem=='opt_only_customurl'){
							//如果是操作按钮(加自定义链接，只有自定义按钮)
							if(customurl){
								htmlstr+='<a href="javascript:;" class="custombtn" data-customkeyfield="'+customkeyfield+'" data-id="'+item[customidfield]+'">'+customtitle+'</a>';
							}
							if(customurl2){
								htmlstr+='<a href="javascript:;" class="custombtn2" data-customkeyfield="'+customkeyfield2+'" data-id="'+item[customidfield2]+'">'+customtitle2+'</a>';
							}
							htmlstr+='</td>';
							continue;
						}
						if(fielditem=='opt_button'){
							if(buttontitle){
								htmlstr+='<a href="javascript:;" class="'+buttonclass+'" data-id="'+item[buttonid]+'">'+buttontitle+'</a>';
							}
							if(buttontitle2){
								htmlstr+='<a href="javascript:;" class="'+buttonclass2+'" data-id="'+item[buttonid2]+'">'+buttontitle2+'</a>';
							}
							if(buttontitle3){
								htmlstr+='<a href="javascript:;" class="'+buttonclass3+'" data-id="'+item[buttonid3]+'">'+buttontitle3+'</a>';
							}
							htmlstr+='</td>';
							continue;	
						}
						
						if(fielditem.indexOf('|')!=-1){
							//如果显示多字段
							var childfields=fielditem.split('|');
							// console.log(fielditem.indexOf('|'));
							 
							var childfieldslen=childfields.length;
							for(var c in childfields){
								htmlstr+=(pagefieldsarray && pagefieldsarray.hasOwnProperty(childfields[c]))?''+pagefieldsarray[childfields[c]][item[childfields[c]]]+'':item[childfields[c]]==null?'':''+item[childfields[c]]+'';
								htmlstr+=c<(childfieldslen-1)?'&nbsp;/&nbsp;':'';
							}
							htmlstr+='</td>';
							continue;
						}
						if(fielditem.indexOf('-')!=-1){
							//如果显示多字段(分行)
							var childfields=fielditem.split('-');
							// console.log(fielditem.indexOf('-'));
							 
							var childfieldslen=childfields.length;
							for(var c in childfields){
								htmlstr+=(pagefieldsarray && pagefieldsarray.hasOwnProperty(childfields[c]))?''+pagefieldsarray[childfields[c]][item[childfields[c]]]+'':item[childfields[c]]==null?'':''+item[childfields[c]]+'';
								htmlstr+=c<(childfieldslen-1)?'<br/>':'';
							}
							htmlstr+='</td>';
							continue;
						}
						if(item.hasOwnProperty(fielditem)){
							if(fielditem=='listorder'){
								//如果是排序
								htmlstr+='<input name="listorders['+item.id+']" class="input input-order mr5" type="text" value="'+item.listorder+'"></td>';
								continue;
							}
							if(fielditem=='thumb'){
								//如果是图片
								var textstring='' + item.thumb+ '';
								var showsmalltype=textstring.indexOf('http') != -1 ? '-s':'';
								if(item.thumb){
									htmlstr+='<a href="javascript:;" οnclick="image_priview(\''+item.thumb+'\',\'90%\',\'90%\')"><img src="'+item.thumb+showsmalltype+'" width=30 /></a></td>';
								}else{
									htmlstr+='</td>';
								}
								continue;
							}
							if(fielditem=='filepath'){
								//如果是文件路径是图片
								var textstring='' + item.filepath+ '';
								var showsmalltype=textstring.indexOf('http') != -1 ? '-s':'';
								if(IsImg(item.filepath)){
									htmlstr+='<a href="javascript:;" οnclick="image_priview(\''+item.filepath+'\',\'90%\',\'90%\')"><img src="'+item.filepath+showsmalltype+'" width=30 /></a></td>';
								}else{
									htmlstr+='<a href="'+item.filepath+'" class="fileicon icon_'+item.suffix+'" target="_blank">点击查看</a></td>';
								}
								continue;
							}
							if(item[fielditem]==null){
								htmlstr+='</td>';
								continue;
							}
							//td内容显示省略号判断
							//判断是否需要添加样式
							var showtdcontent=classarray[j]?'<div class="'+classarray[j]+'">'+item[fielditem]+'</div>':item[fielditem];
							htmlstr+=(pagefieldsarray && pagefieldsarray.hasOwnProperty(fielditem))?''+pagefieldsarray[fielditem][item[fielditem]]+'</td>':''+showtdcontent+'</td>';
						}
					}
 
					htmlstr+='</tr>';
				}
				$(sethtmldemo).empty();
				$(sethtmldemo).html(htmlstr);
				$('.pagination').empty();  
				$('.pagination').html(data.page);
				$('.jsonpage select').removeAttr('onchange');//删除select跳转功能
				//设置json当前的url地址
				if($('.pagecountshow').length){
					$('.pagecountshow').data('url',data.pageurlstring);
				}
				//存在统计字段显示
				if(data.hasOwnProperty('statisticdata')){
					$('.statisticdata').each(function(){
						var fieldset=$(this).data('field')?$(this).data('field'):'';//显示字段
						var childfieldset=fieldset.split('|');//显示字段数组
						var count_childfieldset=childfieldset.length;
						
						var fieldnameset=$(this).data('fieldname')?$(this).data('fieldname'):'';//说明字段
						var childfieldnameset=fieldnameset.split('|');//说明字段数组
						
						var htmlstring='';
						for(n in data.statisticdata) {
							var jsdataitem=data.statisticdata[n];
							for(f in childfieldset){
								htmlstring+=childfieldnameset[f]?childfieldnameset[f]+'：':'';//说明字段显示
								htmlstring+=jsdataitem[childfieldset[f]];
								htmlstring+=f<(count_childfieldset-1)?'':'；&nbsp;&nbsp;';
							}
						}

						$(this).html(htmlstring);
					});
 
				}
			}else{
				
				$(sethtmldemo).empty();
				$('.pagination').empty();
				$('.statisticdata').empty();
			}
			//设置json当前的url地址(用于查询导出做为条件提交)
			if(notseturl==false) history.pushState({}, null, data.pageurlstring);
	}else{
		console.log('数据错误！');
		return;
	}
}

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d f e , \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dfe, Γ(z)=∫0∞​tz−1e−tdfe,

翰客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js向HTML页面动态添加数据（一）
qq_42477391的博客
12-23 3352
需求：JQuery请求的后端多个数据后，赋值给前端页面，以列表的形式展示出来 完成的简单模板 <html> <head> <script src="G:/js/jquery-3.5.1.js"></script> <script> $(function(){ var html = $("#div0").html(); $("#btn").click(function(){
js动态创建列表
qq_43124006的博客
05-07 912
js动态添加删除成员列表
JVS快速开发平台列表页配置
08-04 262
JVS列表页的配置介绍
JS页面设置
super2007的专栏
05-24 1104
转自：http://hi.baidu.com/rnckty/item/8a234fd861f07b31e2108f37   .Noprint{display:none;}  .PageNext{page-break-after: always;}       
使用javascript设置页面值的一个问题
ghl116的专栏
07-23 89
最近在使用javascript，使用iframe框架，从一个页面调用另一个页面的函数的时候，发现一个问题 &lt;div style="float: left"&gt; &lt;iframe name="middle" src="${pageContext.request.contextPath}/page/user/second_usergroupTree.jsp" widt...
中国城市下拉列表 JS数据文件
04-26
用JS做城市下拉列表时，使用城市数据的js文件。直接应用即可在页面使用。
Django 后台带有字典的列表数据与页面js交互实例
09-17
在本文中，我们将探讨Django框架中如何处理带有字典的列表数据，并将其与前端JavaScript进行交互。这个实例特别关注如何在Django视图（views）中构建数据，然后在HTML模板中使用JavaScript来实现动态展示和交互。 ...
js子页面获取父页面数据示例
11-30
做页面预览的时候，数据没有存入数据库，但是要打开一个页面进行预览，询问众大婶，原来是这样来做。 1、父页面 代码如下: <input type=”text” id=”name” value=”zhangsan”/> 预览</a> 2、子页面，也...
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就...
JS获取 设置值
思维小刀
06-07 548
前端 1.JS调用函数 function funcname(){} funcname() 2.$.each() $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 3.$(this) 当前的页面元素对象 相当于this-> 4...
js页面取值的三种方式
weixin_34239592的博客
06-10 972
&lt;input id=""&lt;radio &lt;checkbox&lt;div&lt;img对于这些标签内参数取值，一般分为三种类型：一、有关id取值用 #：取id处的value值：id=$('#id名字').val();取id本身的值：id_value=$('#id名字').attr('id', );对于id中含有变量index的,比如id=mm${st.index}(中括号里面为变量...
在 JavaScript 中创建对象列表
six6de6的博客
10-28 1813
在 JavaScript 中创建对象列表
js 对页面table数据排序
共享
02-13 353
function ieOrFireFox(ob) { if (ob.textContent != null) return ob.textContent; var s = ob.innerText; return s.substring(0, s.length); } //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的...
JS 设置下拉列表的值（设置选中项）
热门推荐
aphy358的博客
11-19 2万+
在js代码里设置一个下拉列表选中项的方法如下： var obj = document.getElementById('selAppType'); $.each(obj .options, function (i, n) {     if (n.value === 'hello') {         n.selected = true;     } });
列表中的修改在单独页面呈现 实现方法
zhuyangxing的专栏
05-11 756
用了几次jquery的dialog对象，这次想做的简单点就没用，这次设计的是添加是一个单独的页面，所以修改也自然而然的成了一个单独的页面了，在实现的过程中出现了问题； 第一次想在一个函数里（修改的这个函数）使用window.location转到新的页面，然后根据id获取对象，填入到新页面，然后保存，结果发现事情不是想象的那样，在这个函数执行完之前它是不会跳转到新页面的。。。于是这种方法失败！
配置表及页面信息 自动生成CURD操作页面
oprim的专栏
07-28 657
目录 1、说明介绍 2、操作说明 2.1、配置数据库表及字段。 2.2、数据页面配置管理。 2.3、对数据进行CRUD操作。 1、说明介绍 2、操作说明 2.1、配置数据库表及字段。 2.2、数据页面配置管理。 配置列表查询条件及展示字段。 配置新增、编辑页面显示操作字段 2.3、对数据进行CRUD操作。 ...
管理系统表达式配置页面及js
凌轻语的博客
09-21 3780
 开发管理系统，碰到了需要配置表达式的地方。花了半天的时间把自己写的整理了一下。页面的效果是下图。 1.生成表达式        页面是有多个table块嵌套而成的。在拼接表达式的时候可以使用回调，具体的方法实现如下： function doaddCondition(tableId){ var expression = ''; var spanId = $("#"+tab...
js实现跨页面传输数据
最新发布
05-29
在不同页面之间传输数据，有多种方法可以实现。以下是其中几种常见的方法： 1. 使用localStorage或sessionStorage localStorage和sessionStorage都是H5提供的本地存储API，可以在浏览器中存储键值对数据。它们的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值