当前位置： 移动技术网 > IT编程>脚本编程>Go语言 > Beego 学习笔记10：Easyui使用

Beego 学习笔记10：Easyui使用

2018年01月11日  | 移动技术网IT编程  | 我要评论

EasyUI使用

1>     下载EasyUI.下载地址：http://www.jeasyui.com/download/index.php

 

 

根据自己使用的是jquery还是Angular进行下载.我使用的是Jquery版本的。

2>     将easyui文件夹解压，添加到项目中。

 

 

3>     编写实现逻辑

1->新增一个名为easyui.go的控制器，编辑业务逻辑

2->在路由器中添加路由配置

3->新增easyui.html页面，作为展示效果使用

 

 

4>     实现的代码如下

1->easyui.go的代码如下:

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() {
    //页数
    pageno,err:=c.GetInt("page")
    if err!=nil{
       fmt.Println(err)
    }
    //每页显示的记录数
    pagesize,err:=c.GetInt("rows")
    if err!=nil{
       fmt.Println(err)
    }
    //搜索的条件
    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的代码如下:

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的代码如下:

<!DOCTYPE html>
 
<html>
      <head>
        <title>首页 - 用户列表页面</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>
        <!--搜索部分-->
        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">
            <input type="text" placeholder="请输入名称" id="txt_search"/>
            <button class="" id="btn_search">搜索</button>
        </div>
      
        <!--数据内容部分-->
        <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部分-->
       <script type="text/javascript">
         //列定义
         var cols = [[
                    { field: "ID", title: 'ID', width: 10, hidden: true },
                    { field: "ck", title: '', width: 20, checkbox: true },
                    { field: "Name", title: '名称', sortable: false, width: 100, align: 'center' },                   
                    { field: "Pwd", title: '密码', sortable: false, width: 150, align: 'center' },
                    { field: "Email", title: '邮箱', sortable: false, width: 250, align: 'center' },
                    { field: "Sex", title: '性别', sortable: false, width: 100, align: 'center' }, 
                    { field: "Phone", title: '手机号', sortable: false, width: 100, align: 'center' },
               ]];

    //页面的初始化
    $(function () {
        //搜索按钮的点击事件
        $("#btn_search").click(function (evt) {
            evt.preventDefault();
            var params = $("#datagrid").datagrid('options').queryParams;
            params.search = $("#txt_search").val();
            $("#datagrid").datagrid("load");
        });
        //输入框的回车事件
        $("#txt_search").keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                $("#btn_search").click();
                return false;
            }
        });
        //加载Easyui数据
        LoadDatagrid();
    });
    //加载列表数据
    function LoadDatagrid() {
        var $dg = $("#datagrid");
        $dg.datagrid({
            title: '数据列表',
            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: "数据加载中...",
            queryParams: {
                saerch: $("#txt_search").val()
            },
            sortName: 'ID',
            sortOrder: 'desc',
            columns: cols,
            onLoadSuccess: function () {
                //多选时，加载完成后清除所有选中项（不然可能会有残留选中项）
                $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>     运行效果

 

 

 

 

6>     下一章节，文件的上传和下载

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网