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

随机推荐

CSS 冲击波(水波纹)效果
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <me ...
Apache JMeter 测试Http请求
环境安装:JDK 下载:http://jmeter.apache.org/download_jmeter.cgi 启动: 简单HTTP请求测试
MySql 分页
MySql 分页由于最近项目需要,于是就简单写了个分页查询.总体而言MySql 分页机制较为简单.数据库方面只需要使用limit即可实现分页.前后台交互就直接用session传了值. 下面就写写具体 ...
[原创]Windows Phone SDK下载
[原创]Windows Phone SDK下载 http://dev.windowsphone.com/zh-cn/downloadsdk
navigationBar设置透明
//设置全透明方式一.完全不用图片(iOS7之后有效)[self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBar ...
Asp.net WebApi + EF 单元测试架构 DbContext一站到底
其实关于webapi和Ef service的单元测试我以前已经写过相关文章,大家可以参考: Asp.net WebAPI 单元测试单元测试 mock EF 中DbContext 和DbSet Inc ...
asp.net中调用命令行
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
在Flex （Flash）中嵌入HTML 代码或页面—Flex IFrame
在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行-- flex而且可以和html进行JavaScript交互 ...
【Vegas原创】安装rhel6.2，不能进图形化界面的终极解决方法
安装的时候,千万不要一路下一步,you should know,linux不是windows那么的傻瓜. 方法一: 在倒数最后一步,选择Desktop,而千万不要下一步,默认选择Basic Ser ...
持续集成工具Hudson安装实例
安装maven 下载maven,解压 [root@localhost local]# pwd /usr/local [root@localhost local]# -bin.tar.gz [root@ ...