项目实践——Easyui解析器
来源:互联网 发布:淘宝店在哪进货 编辑:程序博客网 时间:2024/05/16 12:35
介绍:
解析器可是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的控件样式来。
效果:
小结:
Easyui的一切都是基于解析器$.parser.parse()完成的。
0 0
- 项目实践——Easyui解析器
- 项目实践——谷歌中easyui的tree解析与火狐的异同
- 项目实践——Easyui中tree的使用
- web项目 easyui-datagrid开发实践
- easyui解析器parser
- 项目总结—jQuery EasyUI-Tree使用
- 项目总结—jQuery EasyUI- DataGrid使用
- Linux企业级项目实践之网络爬虫(7)——DNS解析
- easyui 的页面解析 parser解析器
- 项目经历——EasyUI的检索和更新操作
- 项目经历——EasyUI框架内 消息多发
- 项目总结—jQuery EasyUI-DataGrid有参数查询
- 项目总结—jQuery EasyUI-DataGrid动态加载表头
- 项目实践——MD5加密
- 数据结构实践项目——顺序表
- 数据结构实践项目——链表
- 数据结构实践项目——栈
- 数据结构实践项目——队列
- C语言基础之预编译
- HDU 2391 Filthy Rich
- 机器学习实战ByMatlab(五)Logistic Regression
- 算法导论15章动态规划
- 数学之美--笔记5
- 项目实践——Easyui解析器
- pip-get.py安装问题
- Servlet生命周期与工作原理
- 改变小农经济思想
- ROS新兵上路(三)ROS安装
- poj 2386 dfs 水
- Servlet生命周期与工作原理
- VB.NET重构(一)——DataGridView的使用
- hdu 1561 The more, The Better 树状DP