bui前端框架+yii整理
这个是做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>
