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. sublime python 配置内容

    {"cmd": ["python", "-u", "$file"],"file_regex": &q ...

  2. cmd 计划任务

    Schtasks /create /sc ScheduleType /tn TaskName /tr TaskRun [/s Computer [/u [Domain\]User [/p Passwo ...

  3. 【oracle】定时任务

    --创建定时任务-------------------------------------------------------------------------------------------- ...

  4. jvm堆、栈、String常量池

    原文地址:http://blog.csdn.net/tophawk/article/details/78704074 程序计数器:它的生命周期与线程相同,线程私有.较小的内存区域,用以完成分支.循环. ...

  5. HttpClient代理IP及设置连接读取超时

    1.不废话,上代码: public static void main(String[] args) throws Exception { CloseableHttpClient httpClient ...

  6. Gamma阶段事后分析

    设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是安卓游戏的自动化异常检测问题,定义的足够清楚,对于典型用户的描述和典型场景的描述也足 ...

  7. libevent笔记5：水位watermarks

    bufferevent中提供了对读写回调的触发条件及最大缓存长度的设置,即低高水位: 低水位:是读写回调函数的最低触发数据长度,当输入/输出缓存区中的数据长度小于低水位时,读/写回调函数不会被触发: ...

  8. 实现简单的AOP前置后置增强

    AOP操作是我们日常开发经常使用到的操作,例如都会用到的spring事务管理.今天我们通过一个demo实现对一个类的某一个方法进行前置和后置的增强. //被增强类 public class PetSt ...

  9. Docker安装及简单使用（Ubuntu）

    ### Ubuntu18下docker安装 * step 1: 安装必要的一些系统工具 sudo apt-get update sudo apt-get -y install apt-transpor ...

  10. windows，office激活工具推荐

    微软的操作系统windows,办公软件office,都需要付费.今天,蒟蒻菌带来一部软件,可以激活上述软件,那就是: heu_kms_activator_v19.5.1 二话不说,立即使用: 可以根据 ...