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

随机推荐

关于SQL SERVER的N前缀的理解
加N前缀指定后面的字符串为UNICODE常量, SQL Server 的标准中的国家字符数据类型.SQL 使用前缀字符 N 标识这些数据类型及其值. , ),使用个个 Unicode字符时,使用 ...
paip.windows io监控总结
paip.windows io监控总结 io的主要参数是个.disk queue length 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专 ...
asp.net mvc通过预处理实现数据过滤和数据篡改。
需求特别简单.在 Controller加过滤器.实现在所有的方法上增加id=12312321312.另外将price篡改为price+5. 这样做可以最大的减少代码的改动量,人员变动厉害,业务也模糊了 ...
Linux 下Shell 脚本几种基本命令替换区别
Shell 脚本几种基本命令替换区别前言:因为工作需要,需要编写 shell script .编写大量 shell script 时,累计了大量经验,也让自己开始迷糊几种函数输出调用的区别.后面和 ...
数据采集：完美下载淘宝Ip数据库简单的程序节省60元人民币而不必购买数据库
曾经做网站类型的程序时,经常需要收集客户端的访问数据,然后加以分析.这需要一个Ip数据库,数据表中显示Ip所在的省份市区等信息.网络上有流传的Ip纯真数据库,一些公开的Web服务也可以查询Ip地址信息 ...
Eclipse崩溃后无法启动的问题解决
一次Eclipse发生内存溢出(ADT环境,多打开几个xml文件内存占用就会飚升),强制结束任务,再次启动Eclipse发现闪退.查看workspace/.metadata/.log文件发现如下错误信 ...
Activiti 流程实例、任务、执行对象及相关的表
一个流程中,流程实例只有一个,执行对象可以有多个(如果存在分支和聚合) SELECT * FROM activiti.act_ru_execution a; #正在执行的执行对象表 SELECT * ...
C#：WebBrowser控件设置代理IP访问网站【附源码】
软件截图源码下载 http://download.csdn.net/detail/php_fly/8041731
文档大师搜狗拼音无法输入汉字_乱码的解决方法_VB6程序
文档大师用搜狗拼音无法输入汉字,显示的内容和输入的内容不一致.解决方法: 把中文输入里面的那个“美式键盘”再删掉就好用了,只保留搜狗输入法即可!
db2 ha create dependency failed 解决
db2diag.log 2014-10-16-23.27.55.009490-240 E31979E444 LEVEL: ErrorPID : 6651 TID : 140508206864160 P ...