EasyUI use
1> Download EasyUI. Download address: http://www.jeasyui.com/download/index.php
Download according to whether you use jQuery or Angular. I use jQuery version.
2> Unzip the easyui folder and add it to the project.
3> Write implementation logic
1 - > add a new easyui.go To edit business logic
2 - > Add routing configuration in router
3 - > New easyui.html Page, used as a presentation effect
4> The implementation code is as follows
1-> easyui.go The code for is as follows:
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() { //the number of pages pageno,err:=c.GetInt("page") if err!=nil{ fmt.Println(err) } //Number of records displayed per page pagesize,err:=c.GetInt("rows") if err!=nil{ fmt.Println(err) } //Search criteria 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 The code for is as follows:
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 The code for is as follows:
<!DOCTYPE html> <html> <head> <title>home page - User list page</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> <!--Search section--> <div style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;"> <input type="text" placeholder="Please enter a name" id="txt_search"/> <button id="btn_search">search</button> </div> <!--Data content part--> <div style="width:100%;height:450px;"> <table id="datagrid" data-form="easyui" data-options="fit:true" cellspacing="0" cellpadding="0" border="0"></table> </div> <!--JS part--> <script type="text/javascript"> //Column definition var cols = [[ { field: "ID", title: 'ID', width: 10, hidden: true }, { field: "ck", title: '', width: 20, checkbox: true }, { field: "Name", title: 'name', sortable: false, width: 100, align: 'center' }, { field: "Pwd", title: 'password', sortable: false, width: 150, align: 'center' }, { field: "Email", title: 'mailbox', sortable: false, width: 250, align: 'center' }, { field: "Sex", title: 'Gender', sortable: false, width: 100, align: 'center' }, { field: "Phone", title: 'cell-phone number', sortable: false, width: 100, align: 'center' }, ]]; //Page initialization $(function () { //Click event of search button $("#btn_search").click(function (evt) { evt.preventDefault(); var params = $("#datagrid").datagrid('options').queryParams; params.search = $("#txt_search").val(); $("#datagrid").datagrid("load"); }); //Enter event for input box $("#txt_search").keydown(function (event) { if (event.keyCode == 13) { event.preventDefault(); $("#btn_search").click(); return false; } }); //Loading Easyui data LoadDatagrid(); }); //Load list data function LoadDatagrid() { var $dg = $("#datagrid"); $dg.datagrid({ title: 'Data list', 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: "Data loading...", queryParams: { saerch: $("#txt_search").val() }, sortName: 'ID', sortOrder: 'desc', columns: cols, onLoadSuccess: function () { //For multiple selection, clear all selected items after loading (otherwise, there may be residual selected items) $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> Operation effect
6> Next chapter, file upload and download