JQuery EasyUI的使用

JQuery EasyUI的使用攻略

1. 简介

JQuery EasyUI是一款基于JQuery的UI插件，可以轻松地实现各种常见的UI组件，例如表格、日期选择器等等。它采用易于理解的HTML标记和简单的Javascript API，可以使开发人员更快、更容易地开发Web应用程序。

2. 安装

可以通过以下步骤来安装JQuery EasyUI:

1. 下载最新版本的JQuery EasyUI，从官方网站获取（http://www.jeasyui.com/）。
2. 将jquery.easyui.min.js和easyui.css文件拷贝到你的Web应用程序的相应目录下。

3. 在页面中添加以下代码：

   <link rel="stylesheet" type="text/css" href="easyui.css">
<script type="text/javascript" src="jquery.easyui.min.js"></script>

4. 现在，你就可以使用EasyUI的任何组件了。

3. 示例

示例1：EasyUI表格

以下是如何创建一个基本的EasyUI表格的示例代码：

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px;">
    <thead>
        <tr>
            <th field="itemid" width="50">Item ID</th>
            <th field="productid" width="50">Product ID</th>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="status" width="60" align="center">Status</th>
        </tr>
    </thead>
</table>

<script>
    $('#tt').datagrid({
        url:'datagrid_data.json',
        columns:[[{
            field:'itemid',
            title:'Item ID',
            width:80
        },{
            field:'productid',
            title:'Product ID',
            width:100
        },{
            field:'listprice',
            title:'List Price',
            width:80,
            align:'right'
        },{
            field:'unitcost',
            title:'Unit Cost',
            width:80,
            align:'right'
        },{
            field:'status',
            title:'Status',
            width:60,
            align:'center'
        }]]
    });
</script>

示例2：EasyUI日期选择器

以下是如何创建一个基本的EasyUI日期选择器的示例代码：

<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" required="true">
<script>
    function myformatter(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
    }
    function myparser(s){
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[0],10);
        var m = parseInt(ss[1],10);
        var d = parseInt(ss[2],10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
            return new Date(y,m-1,d);
        } else {
            return new Date();
        }
    }
</script>

在以上两个示例中，datagrid和datebox是EasyUI的两个组件，这些组件可以轻松地被添加到你的Web应用程序中，并且通过简单的Javascript API来操作它们，以达到各种不同的需求。