这个是做bui前端样式整合的时候记录的。
首先当然是要下载一个yii的源码，搭建起来。
第一步将bui的样式迁移到yii的样式目录中去
这里我在样式外面加了一个bui的文件夹，表示这个文件夹中存放的是bui相关的样式，以免重复。
然后创建一个控制器，正常编写。
<?php
namespace app\controllers; use Yii;
use yii\web\Controller;class IndexController extends Controller{
public $layout = false; //注意，如果不需要使用yii自带的样式，首先就要加载这条，当然如果你需要每个页面都不要加载yii自带样式，可以将这条写入controller中。这样所有继承的controller就都不会加载yii的样式了
public $enableCsrfValidation = false;//当页面使用ajax来进行获取数据时，如果不定义这个参数，将会报错，功能： ajax限制重复提交
public function actionIndex(){
return $this->render('index');
}
public function actionGetdata(){
//这个方法是获取数据的，根据需求查询，返回值是json格式
}
创建页面
<!DOCTYPE HTML>
<html>
<head>
<title> demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?= yii::$app->params['baseurl'];?>/css/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="<?= yii::$app->params['baseurl'];?>/css/bui-min.css" rel="stylesheet" type="text/css" />
<link href="<?= yii::$app->params['baseurl'];?>/css/page-min.css" rel="stylesheet" type="text/css" /> </head>
<body> <div class="container">
<div class="row">
<form id="searchForm" class="form-horizontal span24">
<div class="row">
<div class="control-group span8">
<label class="control-label">用户名称：</label>
<div class="controls">
<input type="text" class="control-text" name="id" id="inputString"> </div>
</div>
<div class="control-group span8">
<label class="control-label">手机号：</label>
<div class="controls">
<input type="text" class="control-text" name="mobile">
</div>
</div>
<div class="control-group span8">
<label class="control-label">用户昵称：</label>
<div class="controls">
<input type="text" class="control-text" name="nickname">
</div>
</div>
<div class="control-group span8">
<label class="control-label">管理区域：</label>;
<div class="controls" >
<select id="" name="area">
<option value="">请选择</option>
<?php foreach($areadata as $v){?>
<option value="<?php echo $v['bmaid']?>"><?php echo $v['aredesc'];?></option>
<?php }?>
</select>
</div>
</div> <div class="span3 offset2">
<button type="button" id="btnSearch" class="button button-primary">搜索</button>
</div>
</div>
<div class="row"> </div>
</form>
</div>
<div class="search-grid-container">
<div id="grid"></div>
</div>
</div>
<script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/bui.js"></script> <script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/config.js"></script> <script type="text/javascript">
BUI.use('common/page');
</script>
<script type="text/javascript">
BUI.use(['common/search','bui/overlay'],function (Search,Overlay) {
columns = [
{title:'序号',dataIndex:'id',width:80,renderer:function(v){
return Search.createLink({
id : 'detail' + v,
title : '用户信息',
text : v,
href : 'detail/example.html'
});
}},
{title:'用户名称',dataIndex:'uname',width:100},
{title:'用户昵称',dataIndex:'realname',width:100},
{title:'手机号',dataIndex:'mobile',width:80},
{title:'管理区域',dataIndex:'bmaid',width:100},
{title:'注册时间',dataIndex:'regtime',width:300},
{title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
var editStr = Search.createLink({ //链接使用 此方式
id : 'edit' + obj.id,
title : '编辑学生信息',
text : '编辑',
href : 'search/edit.html'
}),
delStr = '<span class="grid-command btn-del" title="删除学生信息">删除</span>';//页面操作不需要使用Search.createLink
return editStr + delStr;
}}
],
//这里是通过url来获取控制器中的json返回数据，pagesize是每页的个数，params：['pageindex'] 这个表示增加一个字段，get方式，可以在控制器中获取它
store = Search.createStore('/index.php?r=Index/getdata',{pageSize:15,params :['pageindex']}),
gridCfg = Search.createGridCfg(columns,{
tbar : {
items : [
{text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:function(){alert('新建');}},
{text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
{text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
]
},
plugins : [BUI.Grid.Plugins.CheckSelection] // 插件形式引入多选表格
}); var search = new Search({
store : store,
gridCfg : gridCfg
}),
grid = search.get('grid');
//删除操作
function delFunction(){
var selections = grid.getSelection();
delItems(selections);
} function delItems(items){
var ids = [];
BUI.each(items,function(item){
ids.push(item.id);
}); if(ids.length){
BUI.Message.Confirm('确认要删除选中的记录么？',function(){
$.ajax({
url : '../data/del.php',
dataType : 'json',
data : {ids : ids},
success : function(data){
if(data.success){ //删除成功
search.load();
}else{ //删除失败
BUI.Message.Alert('删除失败！');
}
}
});
},'question');
}
} //监听事件，删除一条记录
grid.on('cellclick',function(ev){
var sender = $(ev.domTarget); //点击的Dom
if(sender.hasClass('btn-del')){
var record = ev.record;
delItems([record]);
}
});
}); </script> <body>
</html>