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>     下一章节，文件的上传和下载

Beego 学习笔记10：Easyui使用的更多相关文章

  1. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  2. Beego学习笔记

    Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...

  3. Beego 学习笔记14：Session控制

    Session控制 1>     Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2>     Beego框架内置了 session 模块,目前 ...

  4. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  5. 《C++ Primer Plus》学习笔记10

    <C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...

  6. Beego学习笔记——Logs

    日志处理 这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...

  7. Beego学习笔记——Config

    配置文件解析 这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...

  8. Beego学习笔记——开始

    beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...

  9. SQL反模式学习笔记10 取整错误

    目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...

随机推荐

  1. 小学四则运算口算练习app---No.5

    今天主要设置答案页面,主要是出题页面和答案页面之间的传参问题以及答案页面的展示问题!这里运用数组讲出的题目包装成一个String类型数目(包括等号和使用者的作答) 讲正确答案单独包装成一个数组,以及相 ...

  2. 剑指offer 面试题8：二叉树的下一个节点

    题目:给定一棵二叉树和其中一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左.右节点的指针,还有一个节点指向父节点的指针. 中序遍历序列是{d,b,h,e,i,a,f,c,g} ...

  3. 游记&退役记

    划水两天. 给61级和62级都讲过课了,圆了一个梦吧. 62级好好学,61级更是. 老人进养老院了,小孩子也该从幼稚园出来了. 祝广一所有OIER,前程似锦,实力++,rp++. 奶一口zbq:NOI ...

  4. 讲课专用——线段树——BSS

    题目链接:http://codevs.cn/problem/3981/ 题解: 线段树求GSS模板题 一.一段长的区间的 GSS 有三种情况:>1 完全在左子区间>2 完全在右子区间> ...

  5. Eclipse启动发生的错误：An internal error occurred during: "Initializing Java Tooling".

    1.启动Eclipse时,初始化异常:An internal error occurred during: "Initializing Java Tooling". 解决方案:wi ...

  6. ssl证书转换cer转pem

    .pem证书转.cer证书 openssl x509 -outform der -in demo.pem -out demo.cer .cer证书转.pem证书 openssl x509 -infor ...

  7. CF852A Digits

    CF852A Digits 隔壁yijian大佬写出了正解.那我就写一个随机化大法吧? 我们先考虑一种错误的贪心,每个数字分成一位,使其分割后数字和最小.虽然这样是错的,但是我们发现错误的概率很小,所 ...

  8. RPA系列之(二)-UIPath学习目录

    如何一步步渐入佳境,跟着目录一点一点来 UiPath简介 UiPath下载安装与激活 UiPath第一个案例Hello World UiPath变量的介绍和使用-1 UiPath变量的介绍和使用-2 ...

  9. Solr7.x学习（3）-创建core并使用分词器

    1.创建core文件夹 ck /usr/local/solr-7.7.2/server/solr mkdir first_core cp -r configsets/_default/* first_ ...

  10. sql server数据表大小初始化

    sql server表在存储大数据和处理大数据表时,经常会遇到表空间越来越大,有时候会超出应该占有空间大小很多,此时如果表数据是压缩存储的,那么重新执行一下压缩脚本,数据的大小会重新初始化,然后再使用 ...