鳥哥的EasyUI私房菜

Now l have come to the crossroads in my life. I always knew what the right path was. Without exception, I knew, but l never took it. You know why? lt was too damn hard.
—— 《Scent of a Woman》

楔子

經(jīng)常做web后臺(tái)開發(fā)的朋友可能會(huì)遇到這樣的問題，當(dāng)我們獨(dú)立完成一個(gè)比較簡單的功能模塊或者做demo時(shí)，不得不自己編寫前端js代碼以及UI。編寫js代碼可能問題還不大，但是后臺(tái)開發(fā)的朋友如果自己調(diào)整CSS樣式，做出來的頁面效果常常會(huì)丑的超越想象力。。。因此我們經(jīng)常借助一些比較成熟的、擁有一整套UI樣式的工具來輔助我們完成前端開發(fā)工作。

EasyUI 簡介

easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標(biāo)記，就可以定義用戶界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時(shí)間和規(guī)模。
easyui很簡單但功能強(qiáng)大的。
—— JQuery EasyUI中文網(wǎng)

類似功能的UI框架產(chǎn)品還有Twitter的Bootstrap、jQuery LigerUI以及jQuery MiniUI等等。

CRUD 應(yīng)用示例

跟其他的UI框架產(chǎn)品一樣，要是用EasyUI，我們需要先下載它，然后導(dǎo)入到我們的項(xiàng)目中。
EasyUI的下載地址如下：
http://www.jeasyui.net/download/
我們選擇GPL版本下載之。官網(wǎng)上的使用示例是PHP的，但是現(xiàn)在開發(fā)web應(yīng)用大部分還是用的java，因此我們以Spring Boot框架為例講解如何創(chuàng)建一個(gè)簡單的CRUD應(yīng)用。

將解壓出來的EasyUI文件夾改名為easyui，然后放置在src/main/resources文件夾下面的static文件夾中。然后在HTML頁面中引入它們：

<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>  
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{easyui/themes/icon.css}"/>  
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{easyui/themes/color.css}"/>  
<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{easyui/jquery.min.js}"></script>  
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{easyui/jquery.easyui.min.js}"></script>

在body主體中添加datagrid用于存放查詢出來的數(shù)據(jù)

    <table id="dg" title="File List" class="easyui-datagrid" style="width:850px;height:250px"
        url="/getJson"
        toolbar="#toolbar"
        rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <th data-options="field:'id'" width="50">ID</th>
            <th data-options="field:'name'" width="50">Name</th>
            <th data-options="field:'filelist'" width="50">FileList</th>
            <th data-options="field:'state'" width="50">State</th>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newFileList()">New FileList</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editFileList()">Edit FileList</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyFileList()">Remove FileList</a>
    </div>

對(duì)主要的屬性進(jìn)行講解：
url：表示datagrid中存放的數(shù)據(jù)，一般為一個(gè)List<Object>，且存放著JSON對(duì)象。
data-options：表示上面Object對(duì)象的屬性值，例如 field:'name' 表示Object對(duì)象的name將會(huì)顯示在此列。
singleSelect：表示是否可以被單列選中，類似的屬性還有是否顯示分頁、是否顯示行號(hào)等。

完整的controller內(nèi)容

package com.example.filelist.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.filelist.entity.EUDataGridResult;
import com.example.filelist.entity.FileList;
import com.example.filelist.repository.filelistRepository;

@Controller
@RequestMapping(value="/")
public class filelistController {
    
    @Autowired
    private filelistRepository filelistRepository;

    @RequestMapping(value = "/filelist",method = RequestMethod.GET)
    public String getFilelist(Model model)
    {
        List<FileList> filelists = filelistRepository.findAll();
        model.addAttribute("filelists", filelists);
        
        return "filelist";
    }
    
    @ResponseBody
    @RequestMapping(value = "/saveFileList",method = RequestMethod.POST)
    public FileList saveFileList(int id,String name,String filelist,String state,Model model)
    {
        FileList newFileList = new FileList();
        newFileList.setName(name);
        newFileList.setFilelist(filelist);
        newFileList.setState(state);
        FileList saveFileList = filelistRepository.save(newFileList);       
                
        return saveFileList;
    }
    
    @ResponseBody
    @RequestMapping(value = "/updateFileList",method = RequestMethod.POST)
    public FileList updateFileList(int id,String name,String filelist,String state,Model model)
    {
        filelistRepository.updateById(name, filelist, state, id);
        FileList updateFileList = filelistRepository.findById(id);
        
        return updateFileList;
    }
    
    @ResponseBody
    @RequestMapping(value = "/destroyFileList",method = RequestMethod.POST)
    public List<FileList> destroyFileList(int id,Model model)
    {
        filelistRepository.deleteById(id);
        List<FileList> destroyFileList = filelistRepository.findAll();
        
        return destroyFileList;
    }
    
    @ResponseBody
    @RequestMapping(value = "/getJson")
    public List<FileList> getJson(Model model)
    {
        List<FileList> filelists = filelistRepository.findAll();
        
        return filelists;
    }
    
    @RequestMapping(value = "/hello",method = RequestMethod.GET)
    public String hello(Model model) {
        model.addAttribute("name", "Niao");
        return "hello";
    }
    
}

完整的UI內(nèi)容

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" th:href="@{easyui/themes/default/easyui.css}"/>  
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{easyui/themes/icon.css}"/>  
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{easyui/themes/color.css}"/>  
    <script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{easyui/jquery.min.js}"></script>  
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{easyui/jquery.easyui.min.js}"></script>  
</head>
<body>
    <table id="dg" title="File List" class="easyui-datagrid" style="width:850px;height:250px"
        url="/getJson"
        toolbar="#toolbar"
        rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <th data-options="field:'id'" width="50">ID</th>
            <th data-options="field:'name'" width="50">Name</th>
            <th data-options="field:'filelist'" width="50">FileList</th>
            <th data-options="field:'state'" width="50">State</th>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newFileList()">New FileList</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editFileList()">Edit FileList</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyFileList()">Remove FileList</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post">
            <div class="fitem">
                <label>Name:</label>
                <input name="name" class="easyui-validatebox" required="true"></input>
            </div>
            <div class="fitem">
                <label>FileList:</label>
                <input name="filelist"></input>
            </div>
            <div class="fitem">
                <label>State:</label>
                <input name="state" class="easyui-validatebox" required="true"></input>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveFileList()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
    
    <script type="text/javascript">
    function newFileList(){
        $('#dlg').dialog('open').dialog('setTitle','New FileList');
        $('#fm').form('clear');
        url = '/saveFileList';
    }
    
    function saveFileList(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');      // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    
    function editFileList(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Edit FileList');
            $('#fm').form('load',row);
            url = '/updateFileList?id='+row.id;
        }
    }
        
    function destroyFileList(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                if (r){
                    $.post('/destroyFileList',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');    // reload the user data
                        } else {
                            /* $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            }); */
                            $('#dg').datagrid('reload');
                        }
                    },'json');
                }
            });
        }
    }
</script>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,741評(píng)論 25贊 709
  • 中山四路，號(hào)稱重慶最美的街道。這段800多米的路上，匯聚了周公館、桂園、戴公館等名人故居。 街道十分幽靜，綠樹成蔭...
    羅十二閱讀 822評(píng)論 7贊 4
  • 2015極客公園《羅永浩：聊聊好的用戶體驗(yàn)》觀后感 地址：羅永浩：聊聊好的用戶體驗(yàn) 1.錘子目標(biāo)用戶： 城市精英，...
    思斐飛兒閱讀 424評(píng)論 0贊 3
  • 中心圖是一位煉鋼工人，我在網(wǎng)絡(luò)上大量地搜索圖片，最后鎖定了一幅連環(huán)畫，在原圖基礎(chǔ)上做減法，去掉臉部表情，只保留眼鏡...
    fairy_liu閱讀 1,621評(píng)論 2贊 6
  • 擅于創(chuàng)造驚喜的人相信運(yùn)氣都不會(huì)差到哪，生活中身邊的這些的能夠經(jīng)常創(chuàng)造驚喜的朋友相信在大家眼中都像是神一樣的存在。 ...
    漿糊郎中閱讀 233評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容