easyUI学习记录

最新推荐文章于 2024-04-08 09:48:16 发布
原创 最新推荐文章于 2024-04-08 09:48:16 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

参考链接：http://www.cnblogs.com/Philoo/tag/EasyUI/default.html?page=2

1.引入文件顺序

最基本的使用就是引入easyui.min.js文件，以及其对应的jquery.min.js文件。注意的是jquery-easyui是基于jquery的,因此jquery.min.js文件最好先于easyui.min.js先引入

 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/demo/demo.css">
 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4/jquery.min.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4/jquery.easyui.min.js"></script>

2.改变panel的位置

step1：引入文件

step2：data-options的style

step3：js方法 注：一定记住将js方法写在$(function(){});中

3.改变filebox的属性

4.combobox加载数据

 
//正确方案
$('#i_ic_code_sign').combobox({
		 	     //从后台获取数据
			     	url:'${pageContext.request.contextPath}/register_queryCode.action',    
			        valueField:'i_code',    
			        textField:'i_name',
			        panelHeight:'auto'  
			     });

<input id="i_ic_code_sign" class="easyui-combobox" name="i_ic_code" style="width:150px;"/>

//后台
/*=================Action===========================*/
    /*查询行业类别*/
    public void queryCode(){
        List<Category> codeList=categoryService.findAllCode(i_kbn1);
        super.writeJson(codeList);
    } 
注：往前端传的是一个List，这里可以尝试用下List<Map>
<pre name="code" class="javascript">
/*=================Service===========================*/
@Override
    public List<Category> findAllCode(String i_kbn) {
        return getSession().createQuery("select new Category(i_name,i_code) from Category where i_Kbn='"+i_kbn+"'").list();
    }

</pre><pre name="code" class="javascript"><span style="font-size:18px;">注意：当选择多个属性时，Hibernate会将其放入Object数组当中，所以需要特殊处理：即通过构造器完成，同时在Category实体类中需要实现相应的构造器。</span>

<span style="font-size:24px;"><span style="color:#FF0000;">注：对于后台传过来的json数据的调用可以启用firebug进行观察和调用。</span> </span>

5.三级联动选项

             <pre name="code" class="javascript"><input id="<span style="font-family: Arial, Helvetica, sans-serif;">i_address1_sign</span>" class="easyui-combobox" name="i_ic_code" style="width:150px;"/>
  

 var i_country;
            	 var i_postcode;
			     /* 级联菜单功能实现*/
			     $('#i_address1_sign').combobox({
		 	     //从后台获取数据
			     	url:'${pageContext.request.contextPath}/register_queryCountry.action',    
			        /* 根据国家选择省市 */
			        onSelect: function(record){	
			        	  i_postcode=$('#i_postcode_sign').textbox('getValue');
			        	  if((typeof i_postcode)=='undefined'||i_postcode==""){
				           /* 重新选择的时候将其他相联的清空 */
				           $('#i_address2_sign').combobox('clear');
				           $('#i_address2_sign').combobox('loadData','{}');
				           $('#i_address3_sign').combobox('clear');
				           $('#i_address3_sign').combobox('loadData','{}');
					       $('#i_address4_sign').combobox('clear');
				           $('#i_address4_sign').combobox('loadData','[]');
	            			 /* 二级：根据国家查询省份 */
	            			 i_country=record.i_country;
				        	 var url = '${pageContext.request.contextPath}/register_queryProvice.action?i_address1='+encodeURI(encodeURI(record.i_country));    
	            			 $('#i_address2_sign').combobox('reload', url);
	            			 	 /* 三级：根据省市查询城市 */
		            			 $('#i_address2_sign').combobox({
		            			 		onSelect:function(record){
		            			 			if(i_postcode==""){
		            			 				   $('#i_address3_sign').combobox('clear');
										           $('#i_address3_sign').combobox('loadData','{}');
											       $('#i_address4_sign').combobox('clear');
										           $('#i_address4_sign').combobox('loadData','[]');
				            			 		   var url = '${pageContext.request.contextPath}/register_queryCity.action?i_address2='+encodeURI(encodeURI(record.i_province));    
				            					   $('#i_address3_sign').combobox('reload', url);
				            					   $('#i_address3_sign').combobox({
		            						    	/* 四级：根据城市查询区县 */
			            						    onSelect: function(record){
							        	  					var url = '${pageContext.request.contextPath}/register_queryDistrict.action?i_address3='+encodeURI(encodeURI(record.i_city));    
				            						   		 $('#i_address4_sign').combobox('reload', url);
			            						    }
		            						    });
		            			 			}
		            			 		}
		            			 });
			        	  }
			        	  else{
			        	  	  /* 当邮编非空时根据国家和邮编查询得出对应的省市区 */
			        	  	  i_postcode=$('#i_postcode_sign').textbox('getValue');
				        	  $('#i_address2_sign').combobox('clear');
				        	  $('#i_address2_sign').combobox('loadData','[]');
					          $('#i_address3_sign').combobox('clear');
					          $('#i_address3_sign').combobox('loadData','[]');
					          $('#i_address4_sign').combobox('clear');
					          $('#i_address4_sign').combobox('loadData','[]');
			        	  	  var url = '${pageContext.request.contextPath}/register_getByCountryAndCode.action?i_address1='+encodeURI(encodeURI(record.i_country))+'&i_postcode='+encodeURI(i_postcode);    
			        	  	  $('#i_address2_sign').combobox('reload', url);
				        	  $('#i_address3_sign').combobox('reload', url);
				        	  $('#i_address4_sign').combobox('reload', url);
			        	  }
				    }});
			     	
			     	$('#i_postcode_sign').textbox({    
					    onChange:function(newValue,oldValue){
					    	    i_postcode=newValue;
						        if(i_country!=""){
							        var link = '${pageContext.request.contextPath}/register_getByCountryAndCode.action?i_address1='+encodeURI(encodeURI(i_country))+'&i_postcode='+encodeURI(newValue);
							        $('#i_address2_sign').combobox('reload', link);
						        	$('#i_address3_sign').combobox('reload', link);
						        	$('#i_address4_sign').combobox('reload', link);
						        }
					    }       
					});



6.在两个页面之间传多个值


  假设a.jsp中存在一个linkbutton，b.jsp中存在一个表单需要加载a.jsp中表单的数据。那么a.jsp和b.jsp之间的传值的解决方案：http://blog.youkuaiyun.com/f_zhuimeng/article/details/5959042，在本次试验中我采取的是通过session进行传递。


  6.1 通过Linkbutton 提交表单


<a id="nextStep" href="#" class="easyui-linkbutton" >下一步</a>



/* 下一步按钮的触发的check事件 */
					  $('#nextStep').linkbutton({
					      onClick:function(){
					      					      	
					      	/* 提交表单 */
					      	$('#registerForm').submit();
					     
					      }
					  });
注：registerForm为提交的表单，name属性要和model中的字段对应才能够自动封装


那么在后台就可以通过model获取表单的值：


	/*后台代码：显示确认审批页面，并且将表单值提交到去*/
	public String assureUI(){
		ServletActionContext.getRequest().getSession().setAttribute("company", model);
		return "assure";
	}









但是对于用户的每次访问，session仅通过其sessionID进行识别，如果在访问中有对session的多个引用，并且在引用时对session中的值进行了修改，那么session中的此属性也会进行相应的更改。


  http://blog.youkuaiyun.com/tangzenglei/article/details/49301403






  6.2 通过form的load的方法自动获取数据


前台页面
$('#assureForm').form('load','${pageContext.request.contextPath}/register_loadData.action');
注：这里的assureForm为表单的id，name属性要和model中的字段对应
后台：





	/*加载数据到assureUI*/
	public void loadData(){
		Company company=(Company) ServletActionContext.getRequest().getSession().getAttribute("company");
		super.writeJson(company);
	}



7.日期控件


参考资料：http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html








8.datagrid


重点：数据的传输：后台向后台的传输可以运用List<map<key,value>>集合进行操作。


后台：




List<Map<String, Object>> rows=new ArrayList<Map<String,Object>>();
DataGrid dataGrid=new DataGrid();
List<String[]> result=null;
result=tRelationService.findbyCompanyId(i_company_id, i_kbn3,i_tab_name);
			if(result!=null){
				for(int i=0;i<result.size();i++){
					Map<String, Object> row = new HashMap<String, Object>();
					row.put("i_group",(String)((Object[])result.get(i))[0]);
					row.put("i_company_name",(String)((Object[])result.get(i))[1]);
					row.put("i_address",(String)((Object[])result.get(i))[2]);
					row.put("i_scale",(String)((Object[])result.get(i))[3]);
					row.put("i_company_id",String.valueOf(((Object[])result.get(i))[4]));
					rows.add(row);
				}
				dataGrid.setTotal(Long.valueOf(result.size()));
			}
dataGrid.setRows(rows);
super.writeJson(dataGrid);









serviceImpl.java 






@Override
	public List<String[]> findbyCompanyId(String i_company_id, String i_kbn,String i_tab_name) {
		String sql="select * from ( ";
		sql=sql+"select r.i_motion_tab,c.i_company_name,c.i_address3,g.I_name,c.i_company_id from t_Relationship r ";
		sql=sql+" left join M_company  c on r.i_confirm_id=c.i_company_id ";
		sql=sql+"left join M_category g on g.i_code=c.i_cs_code ";
		sql=sql+"where r.i_motion_id='"+i_company_id+"' and g.i_kbn='"+i_kbn+"' and r.i_status='1' ";
		if(i_tab_name!=null){
			sql=sql+" and r.i_confirm_tab like '%"+i_tab_name+"%' ";
		}
		sql=sql+"union ";
		sql=sql+"select r.i_confirm_tab,c.i_company_name,c.i_address3,g.I_name,c.i_company_id from t_Relationship r ";
		sql=sql+"left join M_company  c on r.i_motion_id=c.i_company_id ";
		sql=sql+"left join M_category g on g.i_code=c.i_cs_code ";
		sql=sql+"where r.i_confirm_id='"+i_company_id+"' and g.i_kbn='"+i_kbn+"' and r.i_status='1' ";
		if(i_tab_name!=null){
			sql=sql+" and r.i_confirm_tab like '%"+i_tab_name+"%' ";
		}
		sql=sql+") temp order by temp.i_company_id";
		Query query=getSession().createSQLQuery(sql);
		if((!"".equals(i_company_id))&&(!"".equals(i_kbn))){
			@SuppressWarnings("unchecked")
			List<String[]> list=query.list();
			if(list.isEmpty()){
				return null;
			}
			return list;
		}
		return null;
	}


前台





<div id="partnerListDiv">
		<table id="partnerListTable"></table> 
	</div>


js函数





/* 加载数据到表格 */
		$('#partnerListTable').datagrid({
			url:'${pageContext.request.contextPath}/partner_findAll.action',
			striped:true,
			pagination:true,
			singleSelect:true,
			border: true,
			resizeHandle:'right',//设置可操作的位置
			columns:[[    
				        {field:'i_group',title:'所属分组',width:240,align:'left'},    
				        {field:'i_company_name',title:'公司全称',width:200,align:'left'},    
				        {field:'i_address',title:'公司地址',width:200,align:'left'},   
				        {field:'i_scale',title:'公司规模',width:150,align:'left'},    
				        {field:'edit',title:'',width:70,align:'center',
				        		formatter: function(value,row,index){
				        						return '<a href=\'#\' onclick=\"showEdit(\''+row.i_company_id+'\',\''+row.i_company_name+'\',\''+row.i_group+'\')\">修改分组</a>';
				        				   }
						},    
				        {field:'detail',title:'',width:70,align:'center',
				        		formatter: function(value,row,index){
				        						return '<a href=\'#\' onclick=\"showDetail(\''+row.i_company_id+'\')\">详情</a>';
				        				   }
				        }    
				    ]] 
		});


注意，前端对两个链接定义了onclcik事件，这里运用到的字符串拼接需要注意。








9.根据数据生成标签


效果图效果图







jQuery代码：




var json;//方便共享
	var save;//需要保持的标签id
	var companyId;
	var companyName;
	var companyGroup;
	function showEdit(i_company_id,i_company_name,i_group){
		$('#partnerUpdate').dialog({    
				    title: '修改分组页面',
				    left:300, 	
				    top:100,   
				    width: 400,    
				    height: 310,    
				    closed: false,    
				    cache: false,    
				    modal: true
				});
		if((typeof i_company_name!='undefined')&&i_company_name!='undefined'){
			$('#i_company_name_update').val(i_company_name);//给公司全称赋值
		}
		if((typeof i_group!='undefined')&&i_group!='undefined'){
			$('#i_group_update').val(i_group);//给 所属分组赋值
		}
		if((typeof i_company_id!='undefined')&&i_company_id!='undefined'){
			$('#i_company_id_update').val(i_company_id);//给所属分组赋值
		}
		
		/* 试验 */
     	/* var root=document.getElementById("joinedGroup")
		root.innerHTML="<td id='test'>ce</td>";
		$("#test").linkbutton({
												plain:true,
												toggle:true
										}); */
		/* 制作所属分组动态效果 */
		/* 试验 */
		/* 从M_TAB中动态获取所有分组标签 */
		companyId=i_company_id;
		companyName=i_company_name;
		companyGroup=i_group;
		getTabs(i_company_id);
	}
	<pre name="code" class="javascript">/* 从M_TAB中动态获取所有分组标签 */







function getTabs(i_company_id){
		$.ajax({
				type:"post",
				url:'${pageContext.request.contextPath}/partner_getTabs.action',
				datatype:"json",
				async: false,
				cache:false,
				success:function(data){
									json=jQuery.parseJSON(data);
									var arr=getSelectedTabs(i_company_id);
									save=arr.concat().join(" ");//保存的标签的id
									/* alert(save.join(" ")); */
									var tr=document.createElement("tr");
									for(var i=0; i<json.length; i++){
										var root=document.getElementById("joinedGroup");
										var a=document.createElement("a");
										var td=document.createElement("td");
										a.innerHTML=json[i].iTabName;
										a.href="#";
										/* a.setAttribute('class', 'easyui-tooltip'); */
										a.id=json[i].id.iTabId;
										td.appendChild(a);
										td.setAttribute('style', 'border:1px dashed #000000;border-radius:5px;');
										tr.appendChild(td);
										root.appendChild(tr);
										/* 最后改变样式,否则不起作用 */
										$("#"+a.id).linkbutton({
												plain:true,
												toggle:true
										});	
										for(var j=0;j<arr.length;j++){
											if(a.id==arr[j]){
												$("#"+a.id).linkbutton('options').selected=true;
												/* var id=$("#iTabIdHidden").val()+" ";
												$("#iTabIdHidden").val(id+a.id); *///将当前的所属分组的id记录下来
											}
										}
										/* 设置按钮的大小 */
										$("#"+a.id).linkbutton('resize',{
											  width: '60',
											  height: 30
										 });
										 /* 绑定添加文本 */
										$("#"+a.id).linkbutton({
											onClick:function(){
													var val=$.trim($('#i_group_update').val());//获取文本框中的值，并作为备份
													var flag=$(this).linkbutton('options').selected;
	    											var append=" "+$(this).linkbutton('options').text;
	    											var appendId=$(this).linkbutton('options').id+" ";
	    											/* var ids=" "+$('#iTabIdHidden').val(); *///记录iTabIds
													if(false==flag){
														 val=val.replace(append,"");
														 $('#i_group_update').val(val);
														 /* ids=ids.replace(appendId,""); */
														 save=save.replace(appendId,"");
														 /* $('#iTabIdHidden').val(ids); */
													}else{	
														 $('#i_group_update').val(val+append);
														 save=save+" "+appendId;
														 /* $('#iTabIdHidden').val(ids+appendId); */
													}
												}
										 });
										 /* 每四个button生成转一行 */
										if((i+1)%4==0){
											tr=document.createElement("tr");
											root.appendChild(tr);
										}
									}
							getSelectedTabs(i_company_id);
					},
					error:function(XMLHttpRequest,textStatus,errorThrown){
									alert(XMLHttpRequest.status);
								}
		});
	}
	
	/* 从M_group中动态获取已存在的关系标签 */
	function getSelectedTabs(i_company_id){
		var array=new Array();
		$.ajax({
				type:"post",
				url:'${pageContext.request.contextPath}/partner_getSelectedTabs.action',
				data:{i_target_id:i_company_id},
				datatype:"json",
				async: false,
				success:function(data){
										selected=jQuery.parseJSON(data);
										for(var i=0; i<json.length; i++){
											for(var j=0;j<selected.length;j++){
												if(selected[j].iTabId==json[i].id.iTabId){
													/* $("#"+json[i].id.iTabId).linkbutton('options').selected=true; */
													array.push(json[i].id.iTabId);
												}
											}
										}
									},
					error:function(XMLHttpRequest,textStatus,errorThrown){
									alert(XMLHttpRequest.status);
								}
		});
		return array;
	}
	
	
	/* 保存更新操作 */
	function update(iTabIds,i_group,i_company_id){
		$.ajax({
				type:"post",
				url:'${pageContext.request.contextPath}/partner_updateSave.action',
				data:{"i_company_id":i_company_id,"i_group":i_group,"iTabIds":iTabIds},
				datatype:"json",
				async: false,
				success:function(){
											alert(getErrorMessage('30001'));//提示：保存成功
											$('#partnerUpdate').dialog('refresh');//刷新panel
											$('#partnerUpdate').dialog('close');//关闭修改页面
											$('#partnerListTable').datagrid('reload');//刷新整个表格
									},
				error:function(XMLHttpRequest,textStatus,errorThrown){
											alert("保存失败,请重新选择分组");
									}
		});
	}














                

        

    

    
  



    



                



	

		

			

				
					
EasyUI学习笔记

				
			

			

				

					11-26
				

			

		

		

			
				
一、EasyUI的目录结构 1.demo：包含各种插件的案例(不是必须的) 2.locale：包含语言支持的JS文件(是必须的) 3.plugins：各种JS插件包(必须的) 4.src：JS的源码(不是必须的) 5.themes：各种主题的图片资源，样式文件...

			
		

	



                

            
              



	

		

			

				
					
EasyUI 学习笔记

				
			

			

				

					04-22
				

			

		

		

			
				
### JavaScript 和 jQuery 知识点  #### JavaScript 对象 ...以上是EasyUI的学习笔记，详细介绍了JavaScript和jQuery的基础知识，EasyUI框架的优势、如何学习和使用EasyUI以及搭建开发环境的具体步骤。

			
		

	



              


  
              

                


	

		

			

				
					
【EasyUI篇】LinkButton按钮组件

				
			

			

				

					ouYang的博客
				

				

					08-29
					
					5599
					
				

			

		

		

			
				

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;


查看--&gt; 全套EasyUI示例目录

5.LinkButton按钮组件

 





 

JSP文件


&lt;%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%&gt;
&lt;%...

			
		

	





	

		

			

				
					
61EasyUI 表单 - 创建异步提交表单

				
			

			

				

					阿甘兄
				

				

					04-18
					
					391
					
				

			

		

		

			
				
创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。

创建表单（Form）
<div style="padding:3px 2px;border-bottom:1px...

			
		

	



		

			
		



	

		

			

				
					
EASYUI FORM表单提交post

				
			

			

				

					北极星的专栏
				

				

					09-13
					
					8064
					
				

			

		

		

			
				
贴个我可以的代码给你：

js是jquery-1.11.1.min.js



$.post(url,{userId:userId,mobile:mobile,password:password,address:address},function(json){

        var
 result =json.result;

        var
 isExits 

			
		

	





	

		

			

				
					
探索jQuery EasyUI Extend：一款增强Web界面交互性的神器

					
最新发布

				
			

			

				

					gitblog_00022的博客
				

				

					04-08
					
					301
					
				

			

		

		

			
				
探索jQuery EasyUI Extend：一款增强Web界面交互性的神器
是一个基于 jQuery 和 jQuery EasyUI 的扩展库，旨在为开发者提供更多的组件和功能，以构建更高效、更美观、更具交互性的Web应用程序。在这个项目中，开发者可以找到一系列预设的插件，这些插件能够大大简化前端开发工作，提升开发效率。
技术分析
jQuery EasyUI Extend 建立在成熟且流行的jQ...

			
		

	





	

		

			

				
					
easyUI学习笔记简书1

				
			

			

				

					08-08
				

			

		

		

			
				
在"EasyUI 学习笔记简书1"中，主要介绍了 EasyUI 的边框布局（Border Layout）。  边框布局是 EasyUI 提供的一种常见布局模式，它将页面划分为五个区域：east（东）、west（西）、north（北）、south（南）和 center...

			
		

	





	

		

			

				
					
easyui学习笔记（十三）源码

				
			

			

				

					04-11
				

			

		

		

			
				
在这个"easyui学习笔记（十三）源码"中，我们可以期待深入理解EasyUI的一些关键概念和技术。  首先，EasyUI 的组件系统是其强大之处。组件包括表格（datagrid）、对话框（dialog）、菜单（menu）、下拉框（combobox...

			
		

	





	

		

			

				
					
JQueryEasyUI学习笔记（十）源码

				
			

			

				

					04-08
				

			

		

		

			
				
**jQuery EasyUI 学习笔记（十）：深入源码**  在Web开发中，jQuery EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和便捷的API，帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...

			
		

	





	

		

			

				
					
基于jquery开发的步骤条step.zip

				
			

			

				

					08-31
				

			

		

		

			
				
步骤条在原来基础之上做了相应扩展，代码的地方都做了相应的标注，可以在此基础之上根据自己的需求进行更改，注意使用之前要引入相应的jq包，此插件兼容性很好能够兼容IE8以上，更多插件案例可以查看www.jq22.com网站

			
		

	





	

		

			

				
					
EasyUI Linkbutton 链接按钮

				
			

			

				

					qq_34579060的博客
				

				

					05-23
					
					1011
					
				

			

		

		

			
				
通过 $.fn.linkbutton.defaults 重写默认的 defaults。链接按钮（linkbutton）用于创建一个超链接按钮。它是一个正常的 &lt;a&gt; 标记的表示。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。用法创建链接按钮（linkbutton）从标记创建链接按钮（linkbutton）更容易。&lt;a id="btn...

			
		

	





	

		

			

				
					
easyUI之LinkButton（按钮）

				
			

			

				

					weixin_30514745的博客
				

				

					12-04
					
					1009
					
				

			

		

		

			
				
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>LinkButton（按钮）</title>
    <meta http-equiv="keywords" content="学习,IT学...

			
		

	





	

		

			

				
					
easyUI 提交按钮linkbutton失效和恢复设置

				
			

			

				

					weixin_33940102的博客
				

				

					11-20
					
					752
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
EasyUI+JQuery轻松实现步骤条效果

				
			

			

				

					周洲     （Julie）
				

				

					11-15
					
					8749
					
				

			

		

		

			
				
最近加入一个新的项目组，组长对我好。。。严厉啊！哼，就给了一天时间看看需求，直接是上手实现功能。但是聪明如我，积极主动的去找组长给我讲了讲框架，大概的懂了懂，一天半的时间实现了一个前台的小功能，给大家展示一把~


　　先来讲一下需求。在我们平时购物的时候，经常是这样一个步骤，下订单，交货款，卖家发货，确认收货，评价。那么如果UI设计上一个进度条，这样用户就可以很清楚的看到自己在哪个位置，需

			
		

	





	

		

			

				
					
easyui动态改变datagrid某单元格的值

				
			

			

				

					业精于勤，行成于思
				

				

					07-10
					
					7615
					
				

			

		

		

			
				
Step 1 赋值

>>>> 情况0、不知道数据行的时候，先获取目标单元格


// 得到columns对象
var columns = $('#datagrid名称').datagrid("options").columns;

// 得到rows对象
var rows = $('#datagrid名称').datagrid("getRows"); // 这段代码是

...

			
		

	





	

		

			

				
					
使用iView的步骤条实现简易流程图

					
热门推荐

				
			

			

				

					yang_da_da的博客
				

				

					04-27
					
					1万+
					
				

			

		

		

			
				
主要还是用了v-model双向绑定的概念和render函数，遗憾的是自己不怎么会改step的样式和结构，所以不能自定义流程图的样子，以后再完善吧。效果是这样滴：主要的代码部分：&lt;Table&gt;是图1的表格，&lt;common-dialog&gt;定义了一个对话框，&lt;flow-chart&gt;定义了对话框的内容，也就是流程图啦    &lt;Table width="700" b...

			
		

	





	

		

			

				
					
一个基于jquery easyui的分步表单提交方法

				
			

			

				

					KingSacrificer的博客
				

				

					08-12
					
					1247
					
				

			

		

		

			
				
文章目录场景算法功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
场景
很多时候需要用到把一个表单拆分成几步来提交的业务...

			
		

	





	

		

			

				
					
JQuery向导插件Step——第一个阉割版插件

				
			

			

				

					xingoo
				

				

					05-30
					
					634
					
				

			

		

		

			
				

		
			JQuery向导插件Step——第一个阉割版插件
		
		
		
			
如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点，就是页面在第一次进入的时候，会进行一次很明显的DOM重绘——页面会闪一下。
尤其是前端代码比较庞大的时候，效果更为明显。

为了解决这个问题，就想使用点轻量级的流程向导。于是网上搜了下，恰好园友有这样一个插件，感谢杨元
不过使用...

			
		

	





	

		

			

				
					
easyui学习记录：combotree的使用

				
			

			

				

					05-26
				

			

		

		

			
				
Combotree 是 easyui 中的一个组件，它可以同时显示树形结构和下拉框，可以方便地选择树形结构中的节点。下面是 combotree 的使用记录：  1. 引入 easyui 的 css 和 js 文件：  ```html ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值