`
uule
  • 浏览: 6353020 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

jqueryEasyui常用代码

 
阅读更多
//查询:
	function doSearch(form){		
		var fields =$('#queryForm').serializeArray();
		var $fm = $(form);
		var params = $fm.datagrid('options').queryParams;
		$.each( fields, function(i, field){
			params[field.name] = field.value; 
		});
		$fm.datagrid('reload');
	}

 

//查看[弹窗版]:
formatter : function(value, rowData, rowIndex) {
				return "<a href='javascript:void(0)' onclick='relation_ref_query_onView("+rowIndex+")' >" + value + "</a>";
			}
			
function relation_ref_query_onView(index) {
	var d = $query_datagrid.datagrid("getData").rows[index];
	var p = ysaxui.dialog({
		title : '查看关系规格',
		href : viewRelationUrl,
		width : 765,
		height : 375,
		buttons : [  {
			text : '关闭',
			iconCls : 'ope-close',
			handler : function() {
				p.dialog('close');
			}
		}],
		onLoad : function() {
			var f = p.find('form')
			f.form('load', d);
		}
	});
};	

 

//弹窗
/***
 * 公用规格选择弹窗 
 * @param targetCompId	规格ID存储文本框的ID
 * @param targetCompText  规格名称存储文本框的ID
 * @param specType 规格选择类型  e:实体规格,r:关系规格(两类弹窗数据)
 * @param level 显示层级级别  
 * 				{0:无限制,显示所有  1:只显示大类规格   
 * 				 2:只显示细类规格   3:只显示规格  
 * 				 4:只显示大类和细类}
 * @param repTypeId 关系类型
 * @return
 */
function open_parent_specWindow(targetCompId,targetCompText,specType,level,rp,repTypeId) {
	var hrefUrl = '/mds/oss/content/input/win/openWin_parent_spec_single.html';
	//不同弹窗页面
	if(rp){
		hrefUrl = '/mds/oss/content/input/win/openWin_parent_relation_spec_single.html';		
	}

	var openUrl = "";
	if(specType=='e'){
		openUrl = entityListUrl;
	}else if(specType=='r'){
		openUrl = relationListUrl;
	}else{
		alert('参数设置有误! pub_mds.js');
		return;
	}
	if(!level){
		level = "0";
	}
	var $datagrid = null;

	var p = yasxui.dialog({
		title : '选择规格',
		iconCls : 'pag-add',
		href : hrefUrl,
		width : 600,
		height : 350,
		buttons : [ {
			text : '确定',
			iconCls : 'ope-save',
			handler : function() {
				var selected = $datagrid.datagrid('getSelected');				
				if (selected == null) {
					$.messager.alert('系统提示', '请选择对象');
				} else {							
					$("#"+targetCompText).val((selected["code"]+"/"+selected["name"]));
					$("#"+targetCompId).val((selected["oid"]));							
					p.dialog('close');
				}
				
			}
		}, {
			text : '取消',
			iconCls : 'ope-close',
			handler : function() {
				p.dialog('close');
			}
		} ],
		onLoad : function() {
			//弹窗页面列表数据
			$datagrid = $('#domain_ref_single_chooser_grid');
			$datagrid.datagrid({
				url : openUrl,
				queryParams:{
					'level' : level,
					'relationTypeId':repTypeId
				},
				fit : true,
				singleSelect : true,
				pagination : true,
				pagePosition : 'bottom',
				pageSize : 10,
				pageList : [10, 20, 30, 50, 100],
				fitColumns : true,
				nowrap : true,
				border : false,
				idField : 'id',
				frozenColumns : [ [ {
					field : 'id',
					title : '选择',
					width : 40,
					sortable : false,
					formatter : function(value, rowData) {
						return '<input type="radio" name="domain_ref_single_chooser_grid_radio" value="' + value + '">';
					}
				} ] ],
				columns : [ [ {
					title : '编号',
					field : 'code',
					width : 205
				}, {
					title : '名称',
					field : 'name',
					width : 350,
					sortable : true
				} ] ],
				onClickRow:function() {
				     var selected = $datagrid.datagrid('getSelected');
				     if (selected){
				    	 var index=$datagrid.datagrid('getRowIndex', selected);
				    	 $('input:radio[name="domain_ref_single_chooser_grid_radio"]').get(index).checked = true;	     
				     }}  
			});
			$("#spec_levelId").attr("value","level");
			//弹窗查询
			$("#refChooseButton").click(function(){				
				$('#domain_ref_single_chooser_grid').datagrid('load', yxui.serializeObject($("#specWinForm").form()));
			});
			var specVal ;
			switch(level){
				case "1":
					specVal = 1060 ;break;
				case "2":
					specVal = 1061; break;	
				case "3":
					specVal = 1062; break;	
			}
			//进入时默认选中
			if(specVal){
				p.find("#specLevelId").combobox('select', specVal)	;	
			}					
			
		}
	});	
};

 

//弹窗页面openWin_parent_spec_single.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="easyui-layout" data-options="fit:true" style="padding:1px;overflow:hidden;">
  <!-- north -->
  <div data-options="region:'north',border:false" style="height:40px;">
      <form class="yxForm" id="specWinForm">
      	<input type="hidden" name="level" id="spec_levelId">
        <table class="tableForm_L" style="margin-top:3px" width="99%" border="0" cellpadding="0" cellspacing="1">
          <tr>
            <th width="10%">编号/名称</th>
            <td width="40%"><input name="param" /></td>
            <th width="10%">规格层级</th>
            <td width="40%"><input name="specLevelId" id="specLevelId" class="easyui-combobox" data-options="panelHeight:'auto',editable:false,readonly:true,valueField:'value',textField:'label',data: levelJson" />&nbsp;&nbsp;<a href="#" id="refChooseButton" class="easyui-linkbutton" data-options="iconCls:'ope-search'" style="height:21px;"  >查询 </a></td>
          </tr>
        </table>
      </form>
  </div>
  <!-- center -->
  <div data-options="region:'center',border:false">
    <div id="domain_ref_single_chooser_grid"></div>
  </div>
</div>

 。。

 

分享到:
评论

相关推荐

    jQuery EasyUI 常用UI组件.RAR

    这个RAR文件包含的是jQuery EasyUI的常用UI组件,版本为1.0.5。以下是关于jQuery EasyUI及其常用组件的详细说明: 1. **基本概念**: - **jQuery**:jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档...

    ssm+jqueryeasyui案例

    在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。首先,我们需要在项目中引入SSM框架的相关依赖,包括Spring的核心库、SpringMVC的Servlet容器配置以及MyBatis的数据库...

    基于JQueryEasyUI类库的WebForm控件库

    3. **js**: JavaScript库文件,包含了JQueryEasyUI的所有核心组件和必要的JavaScript代码,用于在客户端渲染和交互。 4. **demo**: 示例代码和演示页面,帮助开发者了解如何在实际项目中应用这些控件,提供了详细的...

    SpringMVC + mybatis + jquery easyUI + mysql代码生成工具

    SpringMVC、MyBatis、jQuery EasyUI 和 MySQL 是构建现代Web应用的常用技术栈,它们各自在软件开发中承担着不同的角色。本项目“SpringMVC + Mybatis + jQuery EasyUI + MySQL 代码生成工具”旨在提高开发效率,通过...

    李炎恢老师jQueryEasyUI视频课程.zip

    《李炎恢老师jQuery EasyUI视频课程》是一个深入学习jQuery EasyUI框架的资源集合,包含了一系列的视频教程和配套的代码文档。jQuery EasyUI是一个基于jQuery的轻量级前端开发框架,它为开发者提供了丰富的UI组件,...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    jQuery EasyUI 1.4

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发的复杂性,提供了大量的可重用组件,如对话框、表格、菜单、按钮等。1.4 版本是该框架的一个稳定版本,包含了丰富的功能和优化。这份 API ...

    springboot和jquery easyui后台框架

    jQuery设计宗旨是使用户的JavaScript编码变得更简单,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 4. **EasyUI**:EasyUI是基于...

    jQuery EasyUI 1.3.2 API离线文档

    - **组件丰富**:EasyUI 提供了如对话框(dialog)、表格(datagrid)、树形结构(tree)、菜单(menu)等多种常用组件,帮助快速构建交互式Web应用。 - **主题支持**:内含多种预设主题,可轻松改变页面样式,...

    jQuery EasyUI v1.3 常用UI组件 Demo合集、离线API、动态换肤.zip

    2. **UI组件Demo合集**: 这个部分提供了jQuery EasyUI所有常用组件的示例代码和演示,包括但不限于: - 数据网格(datagrid):用于展示大量结构化数据的表格。 - 分页(pagination):用于在大量数据中分页浏览。...

    jquery-easyui

    jQuery EasyUI 是一款基于 jQuery 的前端框架,它极大地简化了Web界面开发的过程,让开发者能够用少量的代码快速创建出功能丰富、界面美观的Web应用程序。EasyUI 提供了一系列易于使用的组件,如数据网格、表单、...

    第1章 jQuery EasyUI.pdf

    通过使用 jQuery EasyUI,开发者可以避免编写复杂的 JavaScript 代码以及深入研究 CSS 样式细节,仅需掌握基本的 HTML 标签即可实现丰富的 UI 效果。 - **官方网站**:[http://www.jeasyui.com]...

    Jquery EasyUI DeskTop原创1.1

    EasyUI遵循MVC(Model-View-Controller)模式,使得代码结构清晰,易于维护。 ### Windows 8风格设计 jQuery EasyUI Desktop 1.1 版本借鉴了Windows 8的设计理念,提供了现代化、简洁的用户界面。这包括平滑的动画...

    Jquery easyUI分页实现

    jQuery EasyUI 是一套基于jQuery的UI组件库,它包含了如对话框、表单、表格、菜单、分页等常用组件。这些组件遵循MVC(Model-View-Controller)设计模式,使得代码结构清晰,易于维护。 2. **分页组件** 分页组件...

    Jquery_EasyUI

    对于初学者,可以通过官方文档、在线教程、示例代码等途径学习jQuery EasyUI。理解每个组件的基本用法和API,掌握数据绑定和事件处理,是快速上手的关键。 总之,jQuery EasyUI 是一个强大的前端开发工具,结合C#能...

    jquery easyui API文档

    - **易用性**:EasyUI 提供了一种简单的方式,只需几行代码即可创建复杂的 UI 组件。 - **灵活性**:尽管提供了预定义的 UI 控件,但 EasyUI 允许开发者根据需要定制和扩展这些控件。 - **兼容性**:支持多种浏览器...

    1.[jQuery.EasyUI]第1章.jQuery.EasyUI入门

    本章节将深入探讨 jQuery EasyUI 的基本概念、安装与配置,并通过实例展示其常用组件的使用方法。 ### 一、jQuery EasyUI 的基本概念 jQuery EasyUI 是建立在 jQuery 库之上,提供了一套轻量级、易用的用户界面...

    jQuery_easyui+jQuery1.7API

    总结,jQuery EasyUI和jQuery 1.7 API是现代Web开发的强大工具,它们的组合使用能够极大地提高开发效率,简化前端代码,使开发者能专注于构建功能丰富、用户体验优秀的Web应用程序。通过深入理解和熟练掌握这两个...

    工具 jquery easyui帮助文档

    这个帮助文档是针对jQuery EasyUI的详细指南,包含了组件的使用方法、配置选项以及示例代码,对于学习和使用jQuery EasyUI具有极高的参考价值。 首先,让我们了解一下jQuery EasyUI的核心概念。EasyUI将HTML元素...

Global site tag (gtag.js) - Google Analytics