Beego Learning Notes 10: Easyui Use

EasyUI use

1> Download EasyUI. Download address: http://www.jeasyui.com/download/index.php

 

 

Download according to whether you use jQuery or Angular. I use jQuery version.

2> Unzip the easyui folder and add it to the project.

 

 

3> Write implementation logic

1 - > add a new easyui.go To edit business logic

2 - > Add routing configuration in router

3 - > New easyui.html Page, used as a presentation effect

 

 

4> The implementation code is as follows

1-> easyui.go The code for is as follows:

package controllers

import (
    "secondweb/models"
    "fmt"
    "github.com/astaxie/beego"
)

type EasyUIController struct {
    beego.Controller
}

func (c *EasyUIController) Get() {
    
    c.TplName = "easyui.html"
}
type EasyUIDataController struct {
    beego.Controller
}
func (c *EasyUIDataController) Post() {
    //the number of pages
    pageno,err:=c.GetInt("page")
    if err!=nil{
       fmt.Println(err)
    }
    //Number of records displayed per page
    pagesize,err:=c.GetInt("rows")
    if err!=nil{
       fmt.Println(err)
    }
    //Search criteria
    search:=c.GetString("search")
    userList:=models.SearchDataList(pagesize,pageno,search)
    listnum:=models.GetRecordNum(search)
    c.Data["json"]=map[string]interface{}{"total":listnum,"rows":userList};
    c.ServeJSON();
}

 

 

2-> router.go The code for is as follows:

package routers

 

import (

"secondweb/controllers"

"github.com/astaxie/beego"

)

 

func init() {

beego.Router("/", &controllers.MainController{})

beego.Router("/Home/PageData", &controllers.UserController{})

beego.Router("/Home/PageNextData", &controllers.YonghuController{})

beego.Router("/Home/Index", &controllers.PageController{})

beego.Router("/Home/EasyUI", &controllers.EasyUIController{})

beego.Router("/Home/EasyUIData", &controllers.EasyUIDataController{})

}

  

3-> easyui.html The code for is as follows:

<!DOCTYPE html>
 
<html>
      <head>
        <title>home page - User list page</title>
        <link rel="shortcut icon" href="/static/img/favicon.png" /> 
        <link rel="stylesheet" href="/static/easyui/themes/default/easyui.css" rel="stylesheet"/>
        <link rel="stylesheet" href="/static/easyui/themes/icon.css" rel="stylesheet"/>
        <link rel="stylesheet" href="/static/easyui/themes/default/datagrid.css" rel="stylesheet"/>
        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
        <script src="/static/easyui/jquery.easyui.min.js"></script>
        <script src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>
      </head>       
    <body>
        <!--Search section-->
        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">
            <input type="text" placeholder="Please enter a name" id="txt_search"/>
            <button class="" id="btn_search">search</button>
        </div>
      
        <!--Data content part-->
        <div class="cotMiddle" style="width:100%;height:450px;">
           <table class="tableList" id="datagrid" data-form="easyui" data-options="fit:true" cellspacing="0" cellpadding="0" border="0"></table>
        </div>

        <!--JS part-->
       <script type="text/javascript">
         //Column definition
         var cols = [[
                    { field: "ID", title: 'ID', width: 10, hidden: true },
                    { field: "ck", title: '', width: 20, checkbox: true },
                    { field: "Name", title: 'name', sortable: false, width: 100, align: 'center' },                   
                    { field: "Pwd", title: 'password', sortable: false, width: 150, align: 'center' },
                    { field: "Email", title: 'mailbox', sortable: false, width: 250, align: 'center' },
                    { field: "Sex", title: 'Gender', sortable: false, width: 100, align: 'center' }, 
                    { field: "Phone", title: 'cell-phone number', sortable: false, width: 100, align: 'center' },
               ]];

    //Page initialization
    $(function () {
        //Click event of search button
        $("#btn_search").click(function (evt) {
            evt.preventDefault();
            var params = $("#datagrid").datagrid('options').queryParams;
            params.search = $("#txt_search").val();
            $("#datagrid").datagrid("load");
        });
        //Enter event for input box
        $("#txt_search").keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                $("#btn_search").click();
                return false;
            }
        });
        //Loading Easyui data
        LoadDatagrid();
    });
    //Load list data
    function LoadDatagrid() {
        var $dg = $("#datagrid");
        $dg.datagrid({
            title: 'Data list',
            url: '/Home/EasyUIData',
            fit: true,
            fitColumns: true,
            striped: true,
            nowrap: true,
            idField: 'ID',
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [10, 20, 30, 45, 60, 75],
            rownumbers: true,
            singleSelect: false,
            loadMsg: "Data loading...",
            queryParams: {
                saerch: $("#txt_search").val()
            },
            sortName: 'ID',
            sortOrder: 'desc',
            columns: cols,
            onLoadSuccess: function () {
                //For multiple selection, clear all selected items after loading (otherwise, there may be residual selected items)
                $dg.datagrid("clearSelections");
            },
            onDblClickRow: function (rowIndex, row) {
                
            },
            onSortColumn: function (sort, order) {
                $(".datagrid-view2 .datagrid-header .datagrid-cell .icon.iconfont:hidden").show();
                $(".datagrid-view2 .datagrid-header .datagrid-cell-c1-" + sort + " .icon.iconfont").hide();
            },
            loadFilter: function (data) {
                for (var i = 0; i < data.rows.length; i++) {
                    for (var att in data.rows[i]) {
                        if (typeof (data.rows[i][att]) == "string") {
                            data.rows[i][att] = data.rows[i][att].replace(/</g, "<").replace(/>/g, ">");
                        }
                    }
                }
                return data;
            }
        });
    }
</script>
    </body>
</html>

  

5> Operation effect

 

 

 

 

6> Next chapter, file upload and download

Tags: Go JQuery github Javascript PHP

Posted on Thu, 02 Jul 2020 12:03:54 -0400 by eelmitchell