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>

bui前端框架+yii整理的更多相关文章

Web前端，HTML5开发，前端资源，前端网址，前端博客，前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理综合类前端知识体系前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
前端框架MVVM是什么（整理）
前端框架MVVM是什么(整理) 一.总结一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定. 1.我大前端应该不应该做复杂的数 ...
你所不知道的 CSS 阴影技巧与细节滚动视差？CSS 不在话下神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置前端XSS相关整理委托入门案例
你所不知道的 CSS 阴影技巧与细节关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
整合X-Admin前端框架改造ABP
“站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...
[web前端] 去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？
原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...
(转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
0前端框架库_千万别去碰js呀混合APP_webAPP_美工选有类型的语言，比如TypeScript
常用知识点,技巧添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
BAT 前端开发面经 —— 吐血总结前端相关片段整理——持续更新前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结目录 1. Tencent 2. 阿里 3. 百度更好阅读,请移步这里聊之前最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

Python: map() and reduce()
map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个lis ...
ide phpStorm注释模板修改
1.打开设置 2.找到,如下图所示位置,注意是第二个tab(Includes) 3.再任意空白位置,输入/**,按回车即可出现对应注释内容(其实还可以先 Ctrl + Shift + /,然后删少一个 ...
springboot后台运行
nohup java -jar shareniu.jar >out.txt &
tableview Footerview有多余的间距
调整footerView的高度 UIView *footerV = [[UIView alloc] initWithFrame:CGRectMake(, , Main_Screen_Width, )] ...
Java学习-051-Detected both log4j-over-slf4j.jar AND bound slf4j-log4j12.jar on the class path, preempting StackOverflowError
错误信息:Detected both log4j-over-slf4j.jar AND bound slf4j-log4j12.jar on the class path, preempting St ...
完美脱离Windows!! Linux发行版第一系统 Manjaro 开箱教程 :)
没兴趣? 来几张图敌敌畏(kai kai wei) !! 0x00 预览(zhuangbi) 0x01 引言(feihua) 当我们想用ssh工具时,不像telnet那样是系统自带的软件,需要额外安装 ...
SharePoint 2013 拷贝文件夹到本地
网站--设计(小齿轮)--网站内容--文档库--打开文档库后---单击标题--库--找到下图的红色框的图标. 其名称[使用资源管理器打开] 打开后所有的操作都像资源管理器的操作方式一样
PHP jsonp ajax 跨域实例
HTML代码 <html> <head> <title>跨域测试</title> <script src="http://code.jq ...
Polynomial_0
@[注]两个一元多项式按照指数由大到小的顺序输入! #include <stdio.h> #define MAXSIZE 50 struct PolyNode { int coeffici ...
ubuntu 下dns一类的处理
如何关掉Ubuntu内置的dnsmasq服务 sudo vi /etc/NetworkManager/NetworkManager.conf找到dns=dnsmasq,在前面增加“#”,也就是把这句注 ...

bui前端框架+yii整理

bui前端框架+yii整理的更多相关文章

随机推荐

热门专题