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语法_深浅拷贝
浅拷贝,.copy 只拷贝第一层(可用于建立银行共享账号). s1 = [‘a’,'b','c'] s2 = s1.copy() s2[0]='d' print(s2) print(s1) 此时修改s ...
Selenium 3----鼠标、键盘操作常用方法
[鼠标] 在 WebDriver 中, 关于鼠标操作的方法封装在 ActionChains 类中. ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 Action ...
如何用anysend发wirshark的报文
可以复制抓包的的报文的 hex txt文档粘贴到 anysend 继续发送
Android字符串,颜色,尺寸资源的使用
字符串.颜色.尺寸资源文件这三种文件位于res文件夹的values文件夹中,名称分别为strings.xml , colors.xml , dimens.xml下面是例子,首先来看字符串资源文件str ...
socket通信的遇到的问题1
/*使用select对fd可读写,格式*/ while(ctrl){ //// FD_ZERO(&readSocketSet); FD_SET(readSocketFd,&readSo ...
Jmeter学习之--dubbo接口测试
背景:公司的h5和APP都需要调用许多非http的服务,需要对服务的性能和自动化测试工具:IDEA ,maven,Jmeter 参考文档: https://testerhome.com/topics ...
python条件表达式:多项分支,双向分支
# ### 多项分支 ''' if 条件表达式1: code1 code2 elif 条件表达式2: code3 code4 elif 条件表达式3: code5 code6 else: code7 ...
java中使用springmvc实现下载文件
下载文件具体实现代码: public class TestDownload{ public HttpServletRequest request; public HttpServletResponse ...
Oracle 12C CRS-5013
1.背景 OS:SUSE 12SP3 DB:12.2.0.1.190115 2节点RAC Q:crs alert日志一直刷如下报错 2019-02-12 12:46:18.163 [ORAAGENT( ...
Oracle控制文件冗余
1.备份参数文件.检查控制文件.检查磁盘组名 sqlplus / as sysdba !echo "create pfile='$HOME/pfile_$ORACLE_SID_`date + ...

bui前端框架+yii整理

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

随机推荐

热门专题