项目实践——Easyui解析器

介绍:  

  解析器可是easyui一个重要基础插件,你之所以可以通过简单class定义,在浏览器里面就能展现出一个布局或是面板。全是通过这个插件作为入口,他会获取所有在指定范围内所有定义为easyui组件的class定义,然后在根据后缀定义辨别需要把当前节点解析成为何种组件。

解析器有两种用法:

$.parser.parse();不带任何参数。这种情况下默认是解析页面中所有定义为easyui组件的节点。

 $.parser.parse(‘#cc‘);  带一个jquery选择器。通过这种方式我们可以只解析我们局部定义的easyui组件,

需要说明的这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。

使用:

  说这么多,无非是为了使用,对于Easyui表格中,想要在表格后面拼接一个Easyui样式的按钮控件,以前要不是拼超链接文字,要不是拼接一个图片,从来没有拼接成功过EasyUi样式的按钮,偶然的机会,看到了EasyUI的解析器,终于解决了Easyui表格中拼EasyUI样式控件的问题。

html:

<body>
  <div id="tb" style="padding: 5px;height: auto;">
 
  <a href="javascript:add();" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-add'">add</a>
  <a href="javascript:edit();" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-edit'">edit</a>
  <a href="javascript:del();" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-remove'">del</a>
  <a href="javascript:detial();" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-zoom_out'">view</a>
  </div>
  <div id="grid" ></div>

</body>

JavaScript:

<script  type="text/javascript">
onload = function(){
	$('#grid').datagrid({
	    url:getRootPath()+"/tempalte/getTemMiscByDepId.do;" + $.now(),
	    rownumbers:true,
	    pageSize:10,
	    fitColumns:true,
	    pagination:true,
	    striped:true,
	    singleSelect:true,
	    fit:true,
		columns:[[
	          {field:'id',title:"id",width:100,hidden:true,align:'center'},
	          {field:'templatename',title:"templatename",width:200,align:'center'},
	          {field:'jobtypeid',title:"jobtypeid",width:100,align:'center',hidden:true},
	          {field:'deptid',title:"depId",width:100,align:'center',hidden:true},
	          {field:'templatetype',title:"templatetype",width:200,align:'center',hidden:true},
	          {field:'orderindex',title:"MoveUp/MoveDown",width:90,align:'center',
	        	  formatter: function(value,row,index){
	        		  if(row.id!=""){
	        			var $div = $("<div/>").append("<a href=# class='easyui-linkbutton' iconCls='icon-arrow_up' plain=true onclick='up("+index+")'>GoUp</a>    <a href=# class='easyui-linkbutton' iconCls='icon-arrow_down' plain=true onclick='down("+index+")'>Down</a>");
	        			$.parser.parse($div);
	        			return $div.html();

	        		  }	        	  },

	        },
	    ]],
		toolbar: "#tb"

	});
};

  其中,通过$.parser.parse($div);将拼接好的div用easyui的解析器解析一下,这样在formmat的时候就会出现EasyUI的样式。如果单纯的拼接Easyui的的标签,在formmat函数内不会出来Easyui的效果,但是通过$.parser.parse($div)将拼接的带有EasyUI样式的字符串直接解析出来,从而解析出来Easyui的样式,这样就在formmat函数内显示出EasyUI的控件样式来。

效果:

时间: 2024-10-05 04:45:54

项目实践——Easyui解析器的相关文章

项目实践——Easyui中tree的使用

树状结构在项目中必不可少,这篇博客来学习一下Easyui的tree. 前台JSP <span style="font-size:14px;"><body> <div id="leftDiv" class="easyui-layout" fit="true"> <div region="center" border="false" border=&

easyui解析器parser

在写代码的时候发现如果不是一次在页面写好html代码,而是通过页面加载完成后执行某个方法时添加相应的组件时,添加上去后easyui是不会给你初始化这个组件的,这个时候就必须手动的去初始化这个组件, 如我下面写的聊天窗口,点击聊天的时候初始化窗口,这个时候就需要用到 $.parser.parse('#cc');  // 解析指定节点 才能初始化窗口,否则追加上去是没有效果的,但是发现用是时候这个id又不能为当前组件的id,必须为当前组件的父容器的id 如:<div id="customerC

spring4.2完整web项目(使用html视图解析器)

完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建议很多还是不能用的,可能还会有很多人会遇到和我一样的问题,希望能帮到遇到困难的人. 环境:jdk8,spring4.2.0,tomcat8,使用idea14编辑器,maven管理,git版本控制器,项目远程库地址github:https://github.com/627135316/on_line.欢迎大家clone.中间的用户名也是我qq

02 jquery easyui 之 parser解析器

parser 是jquery easyui中的解析器,页面中class就是用它来渲染. 自动渲染 页面加载过程: 先装载HTML页面文档元素 然后调用$().ready(function(){}) 最后调用parser渲染页面 手动渲染 通过DOM操作输出HTML(easyui)元素信息,那easyui页面不会初始化,只显示原有的HTML代码 <script type="text/javascript"> $().ready(function(){     document

Spring MVC-控制器(Controller)-参数方法名称解析器(Parameter Method Name Resolver )示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_parametermethodnameresolver.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何使用Spring Web MVC框架使用多操作控制器的参数方法名称解析器方法.MultiActionController类有助于分别在单个控制器中将多个URL与其方法映射. package com.tutorialspoint; import java

EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户可以组合使用这些组件,也可以单独使用其中一个.(使用的形式是以插件的方式提供的) EasyUI体系结构 EasyUI所有的插件主要分为六大部分.Base基础.Layout布局.Menu&Button.Form表单.Window窗口等.从最基础的开始先掌握EasyUI基础部分.Base部分包含了八个基础插件分别为: parser(解析器) easyloader(加载器) draggab

Spring MVC-视图解析器(View Resolverr)-多重解析器(Multiple Resolver)示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_multiple_resolver_mapping.htm 说明:示例基于Spring MVC 4.1.6. 如果要在spring mvc应用程序中使用多个视图解析器,则可以使用order属性设置优先级顺序.以下示例显示了如何在Spring Web MVC框架中使用ResourceBundleViewResolver和InternalResourceViewResolver. T

CSV文件格式解析器的实现:从字符串Split到FSM

本文分为5小节,基本上就是我刚接触CSV文件到思考.实践做一个CSV解析器的过程的还原.希望我的思路也能带领你一步步从浅到深认识CSV文件格式. 1.简单的CSV解析器实现. 2.简单实现的CSV解析器的问题 3. CSV格式的定义 4.用FSM(有限状态机)来做CSV格式解析. 5.为什么使用CSV格式 1.简单的CSV解析器实现. 最近有一个需求,读取CSV格式的配置.CSV是CommaSeparated Value(逗号分隔值)的缩写,通常用文本表示数据.CSV格式数据的结构类似表格,不同

Django项目实践2 - Django模板

http://blog.csdn.net/pipisorry/article/details/45061511 上篇:Django项目实践1 - 创建Django项目 Django模板 {视图和模板对逻辑和显示进行了分隔} 上面是使用 django.http.HttpResponse() 来输出"Hello World!".该方式将数据与视图混合在一起,不符合Django的MVC思想.或者HTML被直接硬编码在 Python 代码之中. html = "<html>