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/java script" 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;"> <