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 属性. ...

随机推荐

LINQ-to-SQL那点事~LINQ-to-SQL中的并发冲突与应对
回到目录在上一篇文章中提到了并发冲突,还说详细的说明在这讲来说,呵呵,那现在就说一下吧! 并发冲突产生的原因事实上,linq to sql中的并发冲突是指记录在进行update操作时,客户端A1取 ...
paip.提升性能---并行多核编程哈的数据结构list,set,map
paip.提升性能---并行多核编程哈的数据结构list,set,map vector/copyonwritearraylist 都是线程安全的. 或者经过包装的list ::: collection ...
iOS开发---百度地图配置流程，2.6.0 版本支持64位
1.首先需要在百度地图下载最新SDK:地址: http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 2. ...
Python之Django--ORM连表操作
一对多 class UserType(models.Model): caption = models.CharField(max_length=32) class UserInfo(models.Mo ...
INNO setup安装卸载钱判断进程中是否在运行总结
1.安装前判断进程中是否有程序在运行. [files] ; 安装前判断进程,dll文件放在inno的安装目录中Source: compiler:psvince.dll; Flags: dontcopy ...
CentOS7安装mysql数据库
安装完Centos7,迫不急待的想安装mysql数据库,却没想到走了很多弯路,后来经过查资料,才知道了在Centos7中用MariaDB代替了mysql数据库. 准确来说,本文的标题有点误导的意思,本 ...
单元测试 mock EF 中DbContext 和DbSet Include
现在EF越来越流行了,很多时候业务成都是直接访问DbContext 和DbSet来操作数据的. 那么我们测试的时候如何来mock这2个对象了?现在时间很晚了, 就直接贴code吧首先看看的我们DbC ...
Sencha Toucha 2 —1.环境安装配置、在线打包、离线打包
环境安装配置 1. 下载 1.1 Sencha Touch 下载 http://cdn.sencha.com/touch/sencha-touch-2.2.1-gpl.zip 1 ...
Android高仿微信图片选择功能的PhotoPicker
类似于微信修改头像的功能基本上每个app都会有,以前公司开发的项目就有修改头像的功能,但是用的Android系统自带的图片选择器.用Android系统的图片选择器有个好处就是稳定,不会有什么问题.但也 ...
.NET分布式事务--TransactionScop
一.开启DTC服务方式一计算机—管理—服务—Distributed Transaction Coordinator—属性—开启方式二 CMD命令子界面输入:net start msdtc 二.设 ...