easyui入门第三章

最新推荐文章于 2024-08-07 22:45:25 发布

旦夕祸福

最新推荐文章于 2024-08-07 22:45:25 发布

阅读量105

点赞数

文章标签： jqueryui easyui

本文链接：https://blog.csdn.net/qq_43081232/article/details/104253246

版权

easyui入门记录（三）

menu组件

创建一个菜单

<script type="text/javascript">
	$(function(){
		//右键点击事件
		$(document).bind("contextmenu",function(e){
			//组织默认的菜单(阻止事件冒泡)
			e.preventDefault();
			//弹出菜单
			$("#mm").menu("show",{
				left:e.pageX,
				top:e.pageY
			});
		});
	})
</script>
<body>  
    <div>New</div>   
    <div>   
        <span>Open</span>   
        <div style="width:150px;">   
            <div><b>Word</b></div>   
            <div>Excel</div>   
            <div>PowerPoint</div>   
        </div>   
    </div>   
    <div data-options="iconCls:'icon-save'">Save</div>   
    <div class="menu-sep"></div>   
    <div>Exit</div>   
</div> 
</body>

tree组件

tree组件有两种创建方式：ul创建；json创建
ul创建

	<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>      
</ul>

效果图如下
在这里插入图片描述
json创建：

	$(function(){
		$("#mytree").tree({
			data:
[
  {
    text: 'Item1',
    state: 'closed',
    children: [
      {
        text: 'Item11'
      },
      {
        text: 'Item12'
      }
    ]
  },
  {
    text: 'Item2'
  }
],
			onClick:function(node){
				location.href=node.attributes.url;
			}
		});
	});
</script>
----------------------------------------
<ul id="mytree"></ul>

效果图：
在这里插入图片描述

dialog

1：dialog(对话框窗口)在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具

2：工具栏(toolbar)：可以通过下面的方式创建，也可以通过json数组创建

<div class="easyui-dialog" data-options="width:500,height:400,iconCls:'icon-save',title:'mydialog',toolbar:'#toolbar'">
		dialog content
	</div>
	<div id="toolbar">
		<a class="easyui-linkbutton" >新增</a>
		<span class="easyui-linkbutton">删除</span>
		<span class="easyui-linkbutton">查找</span>
		<input type="text" name="xx"/>
	</div>

**3：**buttons:底部按钮，与toolbar用法一致。

combobox

1：combobox:下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
2:;两种方式创建：select标签与input标签
input标签创建

<script>
	$(function(){
		$('#cc').combobox({    
    		data:
    		[{    
    			"id":1,    
    			"text":"text1"   
			},{    
    			"id":2,    
    			"text":"text2"   
			},{    
    			"id":3,    
    			"text":"text3",    
    			"selected":true   
			},{    
    			"id":4,    
    			"text":"text4"   
			},{    
    			"id":5,    
    			"text":"text5"   
			}] ,    
    		valueField:'id',    
    		textField:'text'   
		}); 

	})

</script>
<body>
	  <input id="cc" name="dept" value="aa">  
</body>
/*
valueField ： 基础数据值名称绑定到该下拉列表框。
textField ： 基础数据字段名称绑定到该下拉列表框  
*/

select标签创建

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">   
    <option value="aa">aitem1</option>   
    <option>bitem2</option>   
    <option>bitem3</option>   
    <option>ditem4</option>   
    <option>eitem5</option>   
</select>

layout

1：布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
一般都是嵌套使用。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    	<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
   		<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    	<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    	<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
	</div>

也可以将body设置为布局

datagrid

1:DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>名称1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>名称2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>

旦夕祸福

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui入门第三章

easyui入门记录（三）menumenu组件menu组件创建一个菜单<script type="text/javascript"> $(function(){ //右键点击事件 $(document).bind("contextmenu",function(e){ //组织默认的菜单(阻止事件冒泡) e.preventDefault(); //弹出菜...
复制链接

扫一扫