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. 重新学习Spring注解——Spring容器

    44.[源码]-Spring容器创建-BeanFactory预准备 45.[源码]-Spring容器创建-执行BeanFactoryPostProcessor 46.[源码]-Spring容器创建-注 ...

  2. apt-get update失败处理：*** Error in `appstreamcli': double free or corruption (fasttop): 0x00000000015c4bf0 ***

    好像只要卸载一个东西就可以了(至少我的是这样): sudo apt-get purge libappstream3 再重新执行update命令, sudo apt-get update 参考链接: 1 ...

  3. 【java异常】定时任务异常ERROR 20604 --- [ scheduling-1] o.s.s.s.TaskUtils$LoggingErrorHandler : Unexpected error occurred in scheduled task

    2019-11-20 13:20:00.006 ERROR 20604 --- [ scheduling-1] o.s.s.s.TaskUtils$LoggingErrorHandler : Unex ...

  4. CanvasRenderingContext2D.drawImage()无效，not working

    我的技术框架:react,如若不采用堵塞方式,即, const myimg = await loadImage(icon28) ctx.drawImage(myimg,0,0, 100, 100)   ...

  5. 海康威视摄像头+OpenCV+VS2017 图像处理小结（二）

    海康威视摄像头+OpenCV+VS2017 图像处理小结(二) https://blog.csdn.net/o_ha_yo_yepeng/article/details/79825648 目录 一.海 ...

  6. PATB1031查验身份证

    这一题遇见的错误有很多,学会了一些知识点 使用了strcpy函数,前是需要复制的数组,后面是被复制的数组 关于字符,如果是非数字可以使用 <='9' && >='0'来判断 ...

  7. vb.net 改变 excel 底色

    Dim excelApplication AsNew Excel.Application Dim excelWorkBook As Excel.Workbook = excelApplication. ...

  8. vue+element 表格筛选

      筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...

  9. mysql 主从 数据不一致

    用pt-table-checksum校验数据一致性 Jun 4th, 2013 主从数据的一致性校验是个头疼的问题,偶尔被业务投诉主从数据不一致,或者几个从库之间的 数据不一致,这会令人沮丧.通常我们 ...

  10. ValueError: Graph disconnected: cannot obtain value for tensor Tensor

    一般是Input和下面的变量重名了,导致model里面的input变成了第二次出现的Input变量,而不是最开始模型中作为输入的Input变量 改正方法:给第二个变量赋一个新名字即可