jQuery EasyUI table表单的数据绑定与交互

最新推荐文章于 2023-05-03 16:51:18 发布
最新推荐文章于 2023-05-03 16:51:18 发布
阅读量6.5k 收藏
点赞数
分类专栏： javaScript 文章标签： easyui 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012059921/article/details/51734712
版权 

/**
 * 针对table进行数据绑定，绑定方式
 * 
table的定义 参数的传递 data-value
data-value:  id为需绑定数据的编号  若需要跳转界面 url:界面路径  location:界面覆盖位置   若需要checkbox则添加check标签 若有xh标签则添加序号显示
formatter用于替换显示值
styleName用于绑定样式这里是class的样式 有的列，如下载需要绑定一个图片，此时可以利用样式完成
text为绑定的值  有的列需要绑定固定的值，比如“详情”
<table id="TCustomer" class="TCustomer" cellspacing="0">
    <thead>
        <tr>
        	<th style="width:20px" data-value={'xh':true}></th>
        	<th style="width:40px" data-value="{'control':'checkbox'}">
        		<input type="checkbox"/>
        	</th>
            <th data-value="{'id':'company_name','url':'../iCore.Mmp.Pt.Web.Oms/CustomerInformation/CustomerDetails.html','location':'.TheCustomer','clickEvent':'TheCustomer.clickShow(this)'}">企业名称</th>
            <th data-value="{'id':'corporation_man','display':'none'}">法人代表</th>
            <th data-value="{'id':'corporation_man','formatter':[{'idField':'4','valueField':'状态2'},{'idField':'1','valueField':'状态1'}]}">法人代表</th>    
        	<th data-value="{'styleName':'tbdownload','text':'测试','clickEvent':'tbfile.downLoad(this)'}" style="width: 40px;text-align:left;">下载</th>	        
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
 
   var tbColumn = new Array();
   $("#TCustomer > thead > tr > th").each(function(){
   		tbColumn.push(eval("("+$(this).attr("data-value")+")"));
   });
   
   ①非分页方式
   //table id:TCustomer    table column:tbColumn  绑定的数据:datas
   CreateTb.WriteTb("#TCustomer",tbColumn,datas);  
   
   ②分页方式
   CreateTb.WriteTb("#TCustomer",tbColumn,datas,"#customerpagination");     
   
   数据获取方式
   CreateTb.getClickRowDb("#TCustomer");
   
   若存在覆盖页则父界面的数据传递给子界面的时候会写到 parantParam 参数中
   具体可看Home.js中的PageJump函数
    function PageJump(Url,MId,params){
    	if(Url) {
            $.ajax({
                url: Url,
                type: "post",
                dataType: 'html',
                success: function (data) {
                	var paramDb="";
                	if(params){
                		paramDb="<script>var parantParam="+JSON.stringify(params)+"; </script>";
                    }
                	if(MId){
                    	$(MId).html(paramDb+data);
                    }
                    else{
                        $(".section-right").html(paramDb+data);
                    }
                }
            });
        }
    }
    
   比如下面 param 其实是点击的那个html节点
	function clickShow(param){
		HomePage.PageJump($(param).attr("data-url"), $(param).attr("data-location"),CreateTb.getRowDb("#TCustomer",param));
	}
	在子界面中用 parantParam即可获取到父界面传递过来的参数
 * */
var CreateTb=function(){
	function WriteTb(tbId,tbColumns,data,PgId){
		var dbCount=0;
	    var isRows=false;
	    var dbTotal=0;
		if(data){
	        if(data.rows){
	            dbCount=data.rows.length;
	            isRows=true;
	            if(data.total){
	            	dbTotal=data.total;
	            }
	        }else{
	            dbCount=data.length;
	        }
	    }
		//可以不在界面构造，tbColumns传一个null过来即可
		var tbColumn = new Array();
		if(!tbColumns){
			$(tbId+" > thead > tr > th").each(function(){
		   		tbColumn.push(eval("("+$(this).attr("data-value")+")"));
		    });
		}else{
			tbColumn=tbColumns;
		}
		var htmlStr="";
	    for(var j=0;j<dbCount;j++) {//循环数据
	        htmlStr+="<tr>";
	        for (var i = 0; i < tbColumn.length; i++) {//循环头部
	        	if(tbColumn[i].control){
	        		//写入checkbox
	        		htmlStr+="<td><input class='checked' type='"+tbColumn[i].control+"'/></td>\n";
	        	}else if(tbColumn[i].xh){
	        		//写入序号列
	        		htmlStr+="<td>"+(j+1)+"</td>\n";
	        	}else{
	        		//写入值
	        		var dbtxt="";
	        		//用于点击跳转
	        		if(isRows){
	        			if(data.rows[j][tbColumn[i].id]!=undefined&&data.rows[j][tbColumn[i].id]!=null){
		        			//'formatter':[{'idField':'0','valueField':'状态0'},{'idField':'1','valueField':'状态1'}]
		        			var formatter=tbColumn[i].formatter;
		        			if(formatter){
			        			for(var k=0;k<formatter.length;k++){
			        				if(data.rows[j][tbColumn[i].id]==formatter[k].idField){
										dbtxt=formatter[k].valueField;
										break;
									}
								}
		        			}else{
		        				dbtxt=data.rows[j][tbColumn[i].id];
		        			}
	        			}
		        		//用于显示隐藏，默认显示
	        			if(tbColumn[i].display){
	        				htmlStr+="<td style='display:"+tbColumn[i].display+"'>";
	        			}else{
	        				htmlStr+="<td>";
	        			}
	        			if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent||tbColumn[i].url||tbColumn[i].location||tbColumn[i].styleName||tbColumn[i].text){
	        				//HomePage.PageJump($(this).attr(\"data-url\"),\""+tbColumn[i].location+"\",CreateTb.getRowDb(\""+tbId+"\",this))
			                //从rows中获取值匹配则构造写入，否则构造空
		        			//必须有绑定事件才能跳转
		        			if(tbColumn[i].clickDivEvent){
		        				htmlStr+="<div style='width:100%' οnclick='"+tbColumn[i].clickDivEvent+"' ";
		        			}else{
		        				htmlStr+="<span ";
		        			}
		        			
	        				if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent){
	        					htmlStr+=" οnclick='"+tbColumn[i].clickEvent+"' ";
	        				}
	        				if(tbColumn[i].url){
	        					htmlStr+=" data-url='"+tbColumn[i].url+"' ";
	        				}
	        				if(tbColumn[i].location){
	        					htmlStr+=" data-location='"+tbColumn[i].location+"' ";
	        				}
	        				
	        				if(tbColumn[i].styleName){
	        					htmlStr+=" class='"+tbColumn[i].styleName+"'";
	        				}
	        				if(tbColumn[i].text){
	        					dbtxt+=tbColumn[i].text;
	        				}
	        				if(tbColumn[i].clickDivEvent){
	        					htmlStr+=">"+(dbtxt?dbtxt:0)+"</div>";
		        			}else{
		        				htmlStr+=">"+dbtxt+"</span>";
		        			}
	        				
	        			}else{
	        				htmlStr+=dbtxt;
	        			}
	        			htmlStr+="</td>\n";
		            }else{
		            	if(data[j][tbColumn[i].id]!=undefined&&data[j][tbColumn[i].id]!=null){
		        			//'formatter':[{'idField':'0','valueField':'状态0'},{'idField':'1','valueField':'状态1'}]
		        			var formatter=tbColumn[i].formatter;
		        			if(formatter){
			        			for(var k=0;k<formatter.length;k++){
			        				if(data[j][tbColumn[i].id]==formatter[k].idField){
										dbtxt=formatter[k].valueField;
										break;
									}
								}
		        			}else{
		        				dbtxt=data[j][tbColumn[i].id];
		        			}
	        			}
		        		//用于显示隐藏，默认显示
	        			if(tbColumn[i].display){
	        				htmlStr+="<td style='display:"+tbColumn[i].display+"'>";
	        			}else{
	        				htmlStr+="<td>";
	        			}
	        			if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent||tbColumn[i].url||tbColumn[i].location||tbColumn[i].styleName||tbColumn[i].text){
	        				if(tbColumn[i].clickDivEvent){
		        				htmlStr+="<div style='width:100%' οnclick='"+tbColumn[i].clickDivEvent+"' ";
		        			}else{
		        				htmlStr+="<span ";
		        			}
	        				
	        				if(tbColumn[i].clickEvent){
	        					htmlStr+=" οnclick='"+tbColumn[i].clickEvent+"' ";
	        				}
	        				if(tbColumn[i].url){
	        					htmlStr+=" data-url='"+tbColumn[i].url+"' ";
	        				}
	        				if(tbColumn[i].location){
	        					htmlStr+=" data-location='"+tbColumn[i].location+"' ";
	        				}
	        				
	        				if(tbColumn[i].styleName){
	        					htmlStr+=" class='"+tbColumn[i].styleName+"'";
	        				}
	        				if(tbColumn[i].text){
	        					dbtxt+=tbColumn[i].text;
	        				}
	        				
	        				if(tbColumn[i].clickDivEvent){
	        					//htmlStr+=">"+(dbtxt?dbtxt:"0")+"</div>";
	        					htmlStr+=">"+(dbtxt?dbtxt:0)+"</div>";
		        			}else{
		        				htmlStr+=">"+dbtxt+"</span>";
		        			}
	        			}else{
	        				htmlStr+=dbtxt;
	        			}
	        			
	        			htmlStr+="</td>\n";
		            }
	        	}
	        }
	        htmlStr+="</tr>\n";
	    }
	    $(tbId).children("tbody").html(htmlStr);
	    
	    if(PgId){
	    	$(PgId).pagination('refresh',{	// 改变选项并刷新分页栏信息
				total: dbTotal
			});
	    }
	    
	    tbCheck(tbId)
	}
	function tbCheck(tbId){
		$(tbId+" thead input[type='checkbox']").click(function(){
			if($(this).prop("checked")){
				$(tbId+" tbody input[type='checkbox']").prop({"checked":true});	
			}else{
				$(tbId+" tbody input[type='checkbox']").prop({"checked":false});
			}
		});
		
		$(tbId+" tbody tr").on("click",function(){
	    	$(tbId+" tbody tr").css({"background-color":"#FFF"});
	    	$(tbId+" tbody tr").removeAttr("data-check");
	    	$(this).css({"background-color":"#E9F7F6"});
	    	$(this).attr("data-check","checked");
	    	$(tbId+" tbody input[type='checkbox']").prop({"checked":false});
	    	$(this).children("td").each(function(){
	    		var ck = $(this).children("input[type='checkbox']");
	    		if(ck){
	    			ck.prop({"checked":true});
	    		}
		    });
	    });
	}
	//获取点击行数据
	function getClickRowDb(tbId){
		var dbColumn=[];
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		});
		var rowDbStr="";
		var i=0;
		$(tbId+" tbody tr[data-check='checked']").children("td").each(function(db){
			if(dbColumn[i]!="null"){
				if(dbColumn[i].formatter){
					for(var k=0;k<dbColumn[i].formatter.length;k++){
						if($(this).text()==dbColumn[i].formatter[k].valueField){
	    					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
							break;
						}
					}
				}else{
					rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
				}
			}
			i++;
		});
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	//获取某一行的数据 indexNum为第N行
	function getIndexRowDb(tbId,indexNum){
		var dbColumn=[];
		var rowDbStr="";
		var i=0;
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		    
		});
		
		$(tbId+" tbody tr:eq("+indexNum+") >td").each(function(){
			if(dbColumn[i]!="null"){
				if(dbColumn[i].formatter){
					for(var k=0;k<dbColumn[i].formatter.length;k++){
						if($(this).text()==dbColumn[i].formatter[k].valueField){
	    					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
							break;
						}
					}
				}else{
					//针对带斜杠的数据如路径
					rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
				}
			}
			i++;
		});
		
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	
	function getRowDb(tbId,param){
		var dbColumn=[];
		
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		    
		});
		
		var i=0;
		var rowDbStr="";
		//td下有span链接情况 
		if($(param).parent().parent().children("td")){
			$(param).parent().parent().children("td").each(function(){
				if(dbColumn[i]!="null"){
					if(dbColumn[i].formatter){
						for(var k=0;k<dbColumn[i].formatter.length;k++){
	        				if($(this).text()==dbColumn[i].formatter[k].valueField){	
								rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
								break;
							}
						}
					}else{
						rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
					}
				}
				i++;
			});
		}else if($(param).parent().children("td")){//td下直接点击数据
			$(param).parent().children("td").each(function(){
				var bflag=false;
				if(dbColumn[i]!="null"){
					if(dbColumn[i].formatter){
						for(var k=0;k<formatter.length;k++){
	        				if($(this).text()==dbColumn[i].formatter[k].valueField){
	        					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
								break;
							}
						}
					}else{
						rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
					}
				}
				i++;
			});
		}
		
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	
	return { 
		WriteTb: WriteTb,
		tbCheck:tbCheck,
		getClickRowDb:getClickRowDb,
		getRowDb:getRowDb,
		getIndexRowDb:getIndexRowDb
	};
}();


一个可以绑定数据源的jQuery数据表格插件
TechNovaX的博客
09-26 110
总结起来，可绑定数据源的jQuery数据表格插件为我们提供了一种简单而强大的方式来创建和管理数据表格。如果你需要在你的Web应用程序中使用数据表格，这个插件将是一个很好的选择。在这个示例中，我们定义了三列（ID、Name和Age），并分别将它们与数据源中相应的属性进行绑定。插件会自动根据数据源和列定义生成表格的HTML结构，并将数据填充到表格中。这个插件可以帮助我们轻松地创建一个数据表格，并将数据源绑定到表格中。这意味着我们可以通过简单的代码来加载和显示数据，而不需要手动创建和更新表格的HTML结构。
EasyUI数据绑定&分页（2）
weixin_54877075的博客
04-12 441
接着上篇文章的内容我们接下来来完成数据的绑定和分页。 1.准备工作：数据表（t_book） 2.页面（bookList.jsp&bookList.js） 在jsp文件夹里面创建一个book文件夹，再在book文件夹里面创建一个“bookList.jsp”文件； <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE htm
jQuery EasyUI API 中文文档 - DataGrid数据表格
03-26 2665
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.j
Jquery DataTable 数据绑定
枫叶的博客
07-03 3092
话不多说，直接代码：var table;$(document).ready(function(){    table =$("#data1").DataTable({            "columnDefs"[{                        "visible": false,                        "targets": 0              ...
EasyUi 数据表格使用
chidi3832的博客
05-31 197
引入CSS ： <link rel="stylesheet" href="__ADMIN__/easy/themes/gray/easyui.css"> 引入JS： <script src="__ADMIN__/easy/jquery.min.js"></s...
jqueryEasyUI
07-16
- **表格（Table）**：呈现表格数据，支持数据操作和交互。 ### 2. 使用步骤 1. **引入库文件**：在 HTML 文件中引入 jQuery 和 jQuery EasyUI 的 CSS、JS 文件。 2. **准备 HTML 结构**：按照 EasyUI 的组件规范...
JQueryEasyUI框架下的combobox的取值和绑定的方法
10-20
在JQueryEasyUI框架中，combobox组件允许用户从下拉菜单中选择一项或者多项，同时可以输入自定义的值，是开发中常用的一种表单元素。接下来我们将详细探讨在JQueryEasyUI框架下如何对combobox组件进行取值和绑定值的...
jQuery EasyUI源代码
03-18
jQuery EasyUI 还提供了数据绑定功能，可以与后端的PHP或其他服务器端技术配合，实现数据的动态加载和编辑。例如，`datagrid`组件可以轻松展示和操作表格数据： ```html <table id="dg" class="easyui-datagrid" ...
李炎恢jQuery EasyUI视频教程
01-29
数据绑定**：利用jQuery的数据绑定能力增强组件之间的交互。 - **3. AJAX集成**：结合AJAX技术实现异步加载数据，提升用户体验。 #### 九、总结 通过本教程的学习，您将能够掌握jQuery EasyUI的基本使用方法及其...
jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)
11-25
2. **表格(Table)**：支持数据分页、排序、过滤和编辑，与后台数据交互方便，适用于展示大量结构化数据。 3. **表单(Form)**：提供各种表单控件，如文本框、下拉框、复选框等，并能自动处理验证和提交。 4. **布局...
jquery表格动态增删改及取数据绑定数据完整方案
06-27
jqery实现的表格动态添加行删除行，绑定后台数据，效率高。很不错的学习资料以及项目运用资料。
Jquery制作可以绑定的表格
weixin_30932215的博客
06-20 144
//总页数 当前页 可见页 参数 翻页执行后处理的函数 function PageTable(totalPages, currentPage, tableobj, url, where, columns) { function PageTableAjax() { initTable(tableobj); $.ajax({ ...
Jquery EasyUI Form Load自动绑定Checkbox问题
weixin_34389926的博客
08-10 254
问题原因 网站采用jquery EasyUi + Asp.net MVC开发，在数据的绑定中使用的easyui form的load方法，此方法可以很方便的将数据绑定的页面的控件中，而不需要单独设置。如需单独设置，只需在loadsuccess事件中增加相应处理方法即可。其中有一个模块的字段使用了checkboxlist，回绑使用自定义方法。在测试环境中没有问题，但一布署到生产环境，就会回绑不了，但...
jQuery-绑定数据-1.1
caishu1995的博客
01-16 1238
    之前给div绑数据，常用的是用js记录，或者是用data-属性，可是今天发现jQuery有个data属性，可以直接绑定数据。 //绑定数据 $.data($("#test1")[0], "bound", [{id: 1, name: "ss"}, {id: 2, name: "sss"}]); //获得数据 var aa = $.data($("#test1")[0], "bound.
Easyui datagrid数据绑定的区别
OnlyRu丶小心心
01-16 896
绑定一：$(‘#datagridID’).datagrid({ data:ajaxResult });绑定二：$(‘#datagridID’).datagrid(‘LoadData’,ajaxResult);有人知道两者之间的区别嘛？欢迎讨论
jQuery的事件（绑定，委托，对象）和数据拷贝（extend）
weixin_58139900的博客
11-18 895
jQuery中全部都是静态获取 只有获取到的是HTMLCollection是动态获取 jQuery中全部都是DOM2级事件绑定，没有DOM0 事件绑定 jQuery对象.事件类型(callBack); 一个事件可以对应多个事件处理函数 $("ul li").click(function(){ console.log("哈哈"); }); $("ul li").click(function(){ con...
Easyui datagrid 编辑结束时combobox显示value而不显示text
我的博客
05-03 474
Easyui datagrid 编辑结束时combobox显示value而不显示text。
easyUI之datagrid绑定后端返回数据的两种方式
weixin_30640769的博客
01-15 2205
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍。 虽然精简，但是，很具有“师傅领进门，修行靠个人”的精神，先发自内心的赞一个。 但是，很多人和小编一样，第一次接触easyUI，对这么精简的问题，问题颇多，因此，小编在这里献上一份个人认为比较详尽的版本 通过HTML/JSP页面初始化表格，JS绑定数据 在JSP中定义table和列名，以...
【html+jquery（大概）】表单的获取和交互
LinkBoundaryless的博客
12-29 432
jQuery表单交互 （虽然标题是这么写……但最后还是用dom实现的，不过jquery的知识也有用到） 先上效果图 以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-3.6.0.min.js"></script> </he
JQueryEasyUI源码分析：实现批量删除与表单修改
在JQueryEasyUI框架下，可以使用`$('#table').table('addRow', data)`方法来添加新行，再通过事件监听来激活编辑功能。代码注释会详细阐述如何通过回调函数来实现这一系列操作，并保证用户界面与数据的一致性。 ###...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值