composer 下载项目之后,项目根目录定在 web 目录,首页如下
yii 的 访问URL 如下
http://www.iy.com/index.php?r=test/layui
其中, test 指 controllers/TestController
layui 指 TestController/actionLayui
如下
class TestController extends Controller
{
public function actionLayui()
{
return $this->render('index'); // 返回页面
}
public function actionAjax(){ // ajax请求
$query = Country::find();
$pagination = new Pagination([
'defaultPageSize'=>5,
"totalCount"=>$query->count(),
]);
$countries = $query->orderBy('name')->offset($pagination->offset)->limit($pagination->limit)->all();
$result = [
'count'=>$query->count(),
'data'=>$countries
];
return Json::encode($result);
// return $this->render('index',[
// 'countries'=>$countries,
// 'pagination'=>$pagination,
// ]);
}
}
页面 views/test/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qing</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script src="<?= Yii::$app->request->baseUrl . '/js/layui/layui.js'?>"></script>
<script src="<?= Yii::$app->request->baseUrl . '/js/jquery.min.js'?>"></script>
<link href="<?= Yii::$app->request->baseUrl . '/js/layui/css/layui.css'?>" rel="stylesheet">
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-content" style="height: 100px;">
<div class="mainTop layui-clear" style="margin:20px">
<div class="fr">
<form class="layui-form layui-from-pane" required lay-verify="required" action="">
<div class="layui-form-item">
用户名:
<div class="layui-inline">
<input class="layui-input" name="username" autocomplete="off">
</div>
公司名称:
<div class="layui-inline">
<input class="layui-input" name="corp_name" autocomplete="off">
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-blue" lay-submit="" lay-filter="search">搜索</button>
</div>
</div>
</div>
</form>
</div>
</div>
<table class="layui-show" id="followTable"></table>
</div>
</div>
</body>
</html>
<script>
layui.use(['element', 'table','laydate','form'], function () {
var $ = layui.jquery,
element = layui.element, //Tab的切换功能,切换事件监听等,需要依赖element模块
table = layui.table,
form = layui.form,
laydate = layui.laydate;
$.ajax({
url:'/index.php?r=test/ajax',
// type:'get',
type:'post',
dataType:"json",
async:true,
sussess:function(){
console.log('成功');
},
error:function(res){
console.log('err');
console.log(res);
}
})
table.render({
elem: "#followTable",
url:'/index.php?r=test/ajax',
// method:"get",
page: true,
cols: [[
{field: "code", title: "id", width: 80},
// {field: "name", title: "名称", width: 100},
]],
parseData: function (res) {
return {
"code": 0,
"msg": "暂无数据",
"count": res.count, // 数据分页
"data": res.data
}
},
error:function(){
console.log('111');
},
done:function(res){
console.log('45');
console.log(res);
}
});
});
</script>
结果如下