jQuery---EasyUI小案列

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

以上来源百度百科

下面介绍下比较常用的插件：

分页[pagination]

实例：

<html>

<head>

    <meta charset="GBK">

    <title>客户端分页demo</title>

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>客户端分页dem</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div></div>

    </div>

    <div style="margin:10px 0;"></div>

    <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="

                rownumbers:true,

                singleSelect:true,

                autoRowHeight:false,

                pagination:true,

                pageSize:10">

        <thead>

            <tr>

                <th field="inv" width="80">Inv No</th>

                <th field="date" width="100">Date</th>

                <th field="name" width="80">Name</th>

                <th field="amount" width="80" align="right">Amount</th>

                <th field="price" width="80" align="right">Price</th>

                <th field="cost" width="100" align="right">Cost</th>

                <th field="note" width="110">Note</th>

            </tr>

        </thead>

    </table>

    <script>

        function getData(){//模拟数据

            var rows = [];

            for(var i=1; i<=80000; i++){

                var amount = Math.floor(Math.random()*1000);

                var price = Math.floor(Math.random()*1000);

                rows.push({

                    inv: 'Inv No '+i,

                    date: $.fn.datebox.defaults.formatter(new Date()),

                    name: 'Name '+i,

                    amount: amount,

                    price: price,

                    cost: amount*price,

                    note: 'Note '+i

                });

            }

            //console.log(JSON.stringify(rows));

            return rows;

        }

        function pagerFilter(data){

            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组

                data = {

                    total: data.length,

                    rows: data

                }

            }

            var dg = $(this);

            var opts = dg.datagrid('options');

            var pager = dg.datagrid('getPager');

            pager.pagination({

                onSelectPage:function(pageNum, pageSize){

                    opts.pageNumber = pageNum;

                    opts.pageSize = pageSize;

                    pager.pagination('refresh',{

                        pageNumber:pageNum,

                        pageSize:pageSize

                    });

                    dg.datagrid('loadData',data);

                }

            });

            if (!data.originalRows){

                data.originalRows = (data.rows);

            }

            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

            var end = start + parseInt(opts.pageSize);

            data.rows = (data.originalRows.slice(start, end));

            return data;

        }

        $(function(){//加载数据

            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

        });

    </script>

</body>

</html>

效果图：

进度条[progressbar]

<html>

<head>

    <meta charset="GBK">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<script>

		function test(){

			var value = $('#p').progressbar('getValue');

			if (value < 100){

				value += Math.floor(Math.random() * 10);

				$('#p').progressbar('setValue', value);

				setTimeout(arguments.callee, 200);

			}

		}

	</script>

</head>

<body>

	进度条

	<div class="demo-info">

		<div class="demo-tip icon-tip"></div>

		<div>Click below button to show progress information.</div>

	</div>

	<div style="margin: 10px 0">

		<a href="#" class="easyui-linkbutton" onclick="test()">Test</a>

	</div>

	<div id="p" class="easyui-progressbar" style="width:400px;"></div>

</body>

</html>

树形菜单[tree]

<html>

<head>

    <meta charset="GBK">

    <title>客户端分页demo</title>

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <style type="text/css">

        .menuLink {

            cursor: pointer;

        }

    </style>

    <script type="text/javascript">

$(function () {

    //动态菜单数据

    var treeData = [{

            text : "菜单",

            children : [{

                    text : "一级菜单1",

                    attributes : {

                        url : ""

                    }

                }, {

                    text : "一级菜单2",

                    attributes : {

                        url : ""

                    }

                }, {

                    text : "一级菜单3",

                    state : "closed",

                    children : [{

                            text : "二级菜单1",

                            attributes : {

                                url : ""

                            }

                        }, {

                            text : "二级菜单2",

                            attributes : {

                                url : ""

                            }

                        }, {

                            text : "二级菜单3",

                            attributes : {

                                url : ""

                            }

                        }

                    ]

                }

            ]

        }

    ];

    //实例化树形菜单

    $("#tree").tree({

        data : treeData,

        lines : true,

        onClick : function (node) {

            if (node.attributes) {

                Open(node.text, node.attributes.url);

            }

        }

    });

    //在右边center区域打开菜单，新增tab

    function Open(text, url) {

        if ($("#tabs").tabs('exists', text)) {

            $('#tabs').tabs('select', text);

        } else {

            $('#tabs').tabs('add', {

                title : text,

                closable : true,

                content : text

            });

        }

    }

    //绑定tabs的右键菜单

    $("#tabs").tabs({

        onContextMenu : function (e, title) {

            e.preventDefault();

            $('#tabsMenu').menu('show', {

                left : e.pageX,

                top : e.pageY

            }).data("tabTitle", title);

        }

    });

    //实例化menu的onClick事件

    $("#tabsMenu").menu({

        onClick : function (item) {

            CloseTab(this, item.name);

        }

    });

    //几个关闭事件的实现

    function CloseTab(menu, type) {

        var curTabTitle = $(menu).data("tabTitle");

        var tabs = $("#tabs");

        if (type === "close") {

            tabs.tabs("close", curTabTitle);

            return;

        }

        var allTabs = tabs.tabs("tabs");

        var closeTabsTitle = [];

        $.each(allTabs, function () {

            var opt = $(this).panel("options");

            if (opt.closable && opt.title != curTabTitle && type === "Other") {

                closeTabsTitle.push(opt.title);

            } else if (opt.closable && type === "All") {

                closeTabsTitle.push(opt.title);

            }

        });

        for (var i = 0; i < closeTabsTitle.length; i++) {

            tabs.tabs("close", closeTabsTitle[i]);

        }

    }

});

</script>

</head>

<body class="easyui-layout">

   <style>

  article, aside, figure, footer, header, hgroup,

  menu, nav, section { display: block; }

  .west{

    width:200px;

    padding:10px;

  }

  .north{

    height:100px;

  }

</style>

</head>

<body class="easyui-layout">

  <div region="north" class="north" title="">

    <h1>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</h1>

  </div>

  <div region="center" title="center">

    <div class="easyui-tabs" fit="true" border="false" id="tabs">

      <div title="首页"></div>

    </div>

  </div>

  <div region="west" class="west" title="menu">

    <ul id="tree"></ul>

  </div>

  <div id="tabsMenu" class="easyui-menu" style="width:120px;">

    <div name="close">关闭</div>

    <div name="Other">关闭其他</div>

    <div name="All">关闭所有</div>

  </div>

</body>

</html>

　　效果图

jQuery---EasyUI小案列的更多相关文章

雷林鹏分享：jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格 - 列运算在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...
jquery easyui 动态绑定数据列
function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...
Jquery局部刷新小案列
/* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...
使用nosql实现页面静态化的一个小案列
页面静态化,其实就是将动态生成的php页面,变成静态的HTML页面,让用户直接访问.有一下几方面好处: 1,首先就是访问速度,不需要去访问数据库,或者缓存来获取哪些数据,浏览器直接加载渲染html页即 ...
canvas小案列-绚丽多彩的倒计时
本次随笔中,我将实现一个绚丽的倒计时效果,这个效果主要是结合canvas和js实现的,具体代码如下 index.html文件 <!DOCTYPE html> <html> &l ...
表格排序tablesort小案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下现有数据列三列 Name,Age,CreateDate 数据张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

随机推荐

H5图片裁剪升级版（手机版）
前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...
atitit.插件体系设计总结o73.doc
1. 两大类型:微内核(级联树形结构)与巨内核(管理容器,并联结构). 1 2. 通用插件接口 1 3. 插件的绑定and 初始化 2 4. 微内核插件平台设计 2 5. 参考 2 1. 两大类型:微 ...
paip.java OutOfMemoryError 解决方法o33
paip.java OutOfMemoryError 解决方法o33 java.lang.OutOfMemoryError: Requested # java.lang.OutOfMemoryErro ...
从range和xrange的性能对比到yield关键字（中）
上节提出了range和xrange的效率问题,这节我们来探究其中的原因 yield的使用我们看下面的程序: #coding: utf-8 def test(): print 4 print ...
IOS开发之进阶篇第一章 - 姿势识别器UIPanGestureRecognizer
今天讲一下姿势识别器,UIGestureRecognizer这个是抽象类 1.拍击UITapGestureRecognizer (任意次数的拍击) 2.向里或向外捏UIPinchGestureReco ...
一个映射到mac风格按键的AHK脚本（替换虚拟机键盘映射）
Mac键位映射(部分) win+q 退出程序 win+w 关闭当前页面 win+h 隐藏当前窗口 win+shift+h 隐藏其他窗口 win+s 保存 win+o 打开 win+z 撤销 win+s ...
关闭Windows Update更新驱动程序
关于Win10的更新配置,特别是自动更新驱动程序,经常会导致驱动安装错误而无法开机的问题. 此时只好开机时按F8进入高级模式恢复最后一次正确配置,或者在安全模式删除错误的驱动程序. 关于Win10的更 ...
dom4j 读取xml
package core.util; import java.io.File; import java.util.Iterator; import java.util.List; import org ...
BigDecimal除法运算出现java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result的解决办法
BigDecimal除法运算出现java.lang.ArithmeticException: Non-terminating decimal expansion; no exact represent ...
spring-boot 加载本地静态资源文件路径配置
1.spring boot默认加载文件的路径是 /META-INF/resources/ /resources/ /static/ /public/ 这些目录下面, 当然我们也可以从spring bo ...