html表格自定义显示列 后台统计，有个表，有60个字段要显示。这时如果页面一次性全部展示出来，大部分屏幕可能不够宽度。这时就需要固定表格列，但如果只是固定列，太多列了还是比较难查看自己需要的列，这时比较优的方案是，每个账号可以选择显示哪些列显示隐藏。http://www.layui.com/demo/table/fixed.html前端实现固定表格列，有很多插件框架实现，这里主要讲下，配合后端实现整个交互逻辑。相关技术点固定表格列字段选择穿梭框数据库保存隐藏字段固定表格列，这里用插件layuihttp://www.layui.com/demo/table/fixed.html字段选择穿梭框，使用 bootstrap的双边栏选择框http://www.jq22.com/jquery-info15984数据库保存隐藏字段，这个搭建用任何后端语言都可以实现，这里用PHP。代码，穿梭框与后端实现交互function getData(){ return new Promise(function(resolve, reject){ $.getJSON('/admin/ad/getField', {}, function (res) { field = res.tableFile console.log(res); resolve(res); //reject( }) }); } getData().then(function(res){ field = res.tableFile $(document).ready(function () { var demo2 = $('.demo').doublebox({ nonSelectedListLabel: '显示列', selectedListLabel: '隐藏列', preserveSelectionOnMove: 'moved', moveOnSelect: false, nonSelectedList: res.show, selectedList: res.hide, optionValue: "field", optionText: "fieldName", doubleMove: true, }); layui.use('table', function () { var table = layui.table; var w = document.body.scrollWidth - 50; var h = document.body.scrollHeight - 390; table.render({ elem: '#test', limit: 10 , url: '/admin/ad/getData?Ad[type]='+<?php echo isset($_GET['Ad']['type'])?intval($_GET['Ad']['type']):1 ?> , width: w , height: h , cols: [field] , page: true }); }); }) }); 后台API返回对应的显示列，即可，格式如下 { "show":[ { "field":"date", "fieldName":"时间" }, { "field":"clientName", "fieldName":"广告主名称" }, { "field":"adId", "fieldName":"广告id" }, { "field":"adName", "fieldName":"广告名称" }, { "field":"order_roi", "fieldName":"下单ROI" }, { "field":"quest_reservation_pv", "fieldName":"销售线索量" } ], "hide":[ { "field":"contract_flag", "fieldName":"购买类型" }, { "field":"pos_type", "fieldName":"广告位" }, { "field":"convclk_pv", "fieldName":"可转化点击次数" }, { "field":"convclk_cpc", "fieldName":"可转化点击成本" }, { "field":"clk_pv", "fieldName":"点击人数" }, { "field":"exp_pv_avg", "fieldName":"人均曝光次数" }, { "field":"img_uv", "fieldName":"图片点击人数" }, { "field":"play_pv", "fieldName":"视频点击次数" }, { "field":"play_uv", "fieldName":"视频点击人数" }, { "field":"detail_pv", "fieldName":"文字链点击次数" }, { "field":"ios_act_pv", "fieldName":"IOS激活次数" }, { "field":"download_complete_pv", "fieldName":"APP下载完成次数" }, { "field":"install_complete_pv", "fieldName":"APP安装完成次数" }, { "field":"app_act_pv", "fieldName":"APP激活次数" }, { "field":"app_reg_pv", "fieldName":"APP注册次数" }, { "field":"app_addtocart_pv", "fieldName":"APP加入购物车次数" }, { "field":"app_purchase_pv", "fieldName":"APP付费次数" }, { "field":"card_use_pv", "fieldName":"卡券使用次数" }, { "field":"share_page_pv", "fieldName":"广告分享次数" }, { "field":"share_page_uv", "fieldName":"广告分享人数" }, { "field":"nointerest_pv", "fieldName":"不感兴趣点击次数" } ], "tableFile":[ { "field":"date", "width":140, "title":"时间", "fixed":"left" }, { "field":"clientName", "width":140, "title":"广告主名称", "fixed":"left" }, { "field":"adId", "width":100, "title":"广告id", "fixed":"left" }, { "field":"adName", "width":140, "title":"广告名称", "fixed":"left" }, { "field":"balance", "width":140, "title":"余额", "fixed":"left" }, { "field":"quest_reservation_pv", "width":100, "title":"销售线索量" } ] }最终演示效果

小程序显示H5网页教程 小程序显示H5网页教程介绍小程序里显示Html代码，目前插件（wxParse 解析html）解析支持不太好，有时候格式还是达不到预想的效果。 小程序里的HTML语法有台奇葩， 最好的解决方案是直接在里面显示HTML页面，使用小程序的web-view组件。之前由于需要验证原因，很多人把Bmob的素材页面填写到微信的业务域名，提示：小程序设置web-view业务域名，解决“不支持打开非业务域名，请重新配置”这个提示的根本原因，是没有成功设置业务域名。次次开放业务域名设置。大家可以上传静态HTML文件到自己应用。设置业务域名前要做的准备1.备案的域名 （如果有自己备案的域名，可以提交工单绑定自己域名，没有Bmob后端可以开通一个应用私人域名）2.FTP 上传工具（这里大家通过Bmob后台素材生成HTML，或自己编写的代码工具都可以）当然FTP会更方便管理这些文件。设置教程1.登陆微信小程序控制台，进入设置-》开发设置-》业务域名（这里注意，目前只有企业资质也有这个设置）2.点击设置，注意这里需要管理员扫描下载这个效验文件到电脑，目前格式是txt。传入到自己私人域名3.上传到自己应用文件域名下4.检查是否正确上传成功后，点击保存。完成设置显示HTML示例代码<!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>https://mp.weixin.qq.com/ 是你的HTML地址。数据库查询标题，列表也点击开这个URL。 例如Bmob的图文素材表，都会有个HTML，大家可以把这个地址填入web-view 这样就完美的解决了小程序显示HTML代码错乱问题。

Yii Framework 1.1 使用 Bootstrap 相关官网教程以及下载地址： 安装后遇到表单页面无法访问，目前网上没找到相关解决教程，特把解决过程记录于此。 1.错误一 Declaration of BActiveForm::checkBox() should be compatible withCActiveForm::checkBox($model, $attribute, $htmlOptions = Array) 解决方法： 1.修改 protected/extensions/bootstrap-theme/widgets/BActiveForm.php 的 234行 点击(此处)折叠或打开 publicfunction checkBox(CModel $model,$attribute,$htmlOptions=array()){ 为 点击(此处)折叠或打开 publicfunctioncheckBox($model,$attribute,$htmlOptions=array()){ 2.下面一个函数同理 点击(此处)折叠或打开 publicfunction labelEx(CModel $model,$attribute,$htmlOptions=array()) 为 点击(此处)折叠或打开 publicfunction labelEx($model,$attribute,$htmlOptions=array()) 错误二：Declaration of BHtml::linkButton() should be compatible withCHtml::linkButton($label = 'submit', $htmlOptions = Array) 修改：protected/extensions/bootstrap-theme/helpers/BHtml.php 199行 点击(此处)折叠或打开 publicstatic function linkButton($label,$url='#',$htmlOptions=array()){ 改为下面 publicstatic function linkButton($label='submit',$htmlOptions=array()){ 页面成功显示：

Serverless实战驾校小程序【考题练习】二 Serverless实战驾校小程序【考题练习】二介绍准备工作做完后，今天我们从核心模块，分类与题目练习开始做。由于开发时间比较紧，这里主要写实习思路，与核心代码。页面一、首页这里我们主要优先实现功能逻辑，UI后面调整，我们用iview 拖一个大致结构的页面。这里用了以下组件{ "usingComponents": { "i-tab-bar": "../../dist/tab-bar/index", "i-tab-bar-item": "../../dist/tab-bar-item/index", "i-grid": "../../dist/grid/index", "i-grid-item": "../../dist/grid-item/index", "i-grid-icon": "../../dist/grid-icon/index", "i-grid-label": "../../dist/grid-label/index", "i-tabs": "../../dist/tabs/index", "i-tab": "../../dist/tab/index" } }页面二、专项练习页面这个页面，我们从数据库里取出数据，首先建立好数据表，这个表结构昨天有讲。我们导入一个CSV格式数据到表里CSV文件内容bSubjects,title 1,时间题 1,速度题 1,距离题 1,罚款题 1,记分题 1,标志题 1,标线题 1,手势题 1,信号灯 1,灯光题 1,仪表题 1,装置题 1,路况题 1,酒驾题 1,动画题 1,情景题然后我们取出这里的数据，在小程序里面显示核心代码// 库文件 const getQuestionTypeList=()=>{ return new Promise((resolve, reject) => { const query = wx.Bmob.Query('questionType'); query.find().then(res => { console.log(res) resolve(res) }).catch(err=>{ console.error(err) reject(err) }) }); } // 页面js文件 wechatApp-questions2/pages/topic/index.js onLoad(e){ wx.u.getQuestionTypeList().then(r=>{ console.log(r,`k`) this.setData({ result:r }) }) }, // wxml文件 <i-panel title="题型列表" hide-top> <!-- <view style="padding: 15px;">头部距离为 0 的 Panel</view> --> <i-row> <i-col wx:for="{{result}}" span="12" i-class="col-class"> <i-panel bindtap="handleTabClick" data-id="{{item.objectId}}" class="cell-panel-demo" title=""> <i-cell title="{{item.title}}" value=""> <i-icon type="enterinto" slot="icon" /> </i-cell> </i-panel> </i-col> </i-row> </i-panel>首页点击到分类，分类点击到题目页面，下一个是题目页面，这个页面是整个项目的核心， 所以的题目都在这个页面进行计算，判断。页面三、答题页面这个页面会是最复杂的一个页面， 涉及到，计时，判断、记录历史等等操作。 之前只想到模拟考试，没考虑到这种按照顺序练习， 第二次进入，可以继续之前的题目练习。 这里建个学习表，记录他的顺序练习相关数据，以下是数据表暂定的结构学习表 learning名称类型描述bSubjectssting所属科目 1.科目一 2.科目四bModelssting所属车型 1.小车 2.货车 3.客车 4.摩托车wherestring查询的条件 {"where":{"name":1},"order":"name"}numstring学习到第多少道题resultarray结果 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}]typeint0，免费版题目 1，付费版题目uidstring用户id第一步：还是一样，用iview 复制出对应组件第二步：查询出此类别的题目， 并且默认显示一道题，点击下一题，显示数组下一个元素第三步：先做单选题，点击选择，判断是否正确， 如果正确，记录到结果对象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ，0代表回答错误，1正确第四步：点击下一题计算进度条位置，判断当前是否选择了题目，否则提示请选择结果。目前做到这个一步，明天继续。

Bmob-FaaS-或“函数即服务”-介绍（1） Bmob FaaS 或“函数即服务” 介绍函数即服务是一种新的软件基础设施术语，它比容器颗粒更小。FaaS与Baas很类似，都是为了提高开发效率，解决微服务中所遇到的问题，先对而言Faas灵活度更高。大家一般把 Faas+Baas=Serverless.Bmob在国内最早做这个的企业之一，当时还完全未有借鉴，在走这条路的过程中也遇到了许许多多困难。什么是函数服务有人举了个很好的例子.图侵权删Serverless是一种基于互联网的技术架构理念,它具有1、低运营成本；2、简化设备运维；3、提升可维护性；4、简单易用，更快的开发速度；5、相对小企业可靠性更好好面临的问题1.用户无数的Function 如何处理？2.如何实现弹性部署？3.如何集成日志、监控等工具？4.服务问题？5.安全问题？第一个问题:用户无数的Function 如何处理？1.我们可以给每个用户Function建立一个文件夹2.我们可以每个用户一个容器第二个问题:如何实现弹性部署？1.如果要实现这一秒1K QPS，下一秒1W QPS。负载均衡有限的弹性部署中小云厂家是可以做到，并且你有活动还可以手动给你账户定制QPS。2.如果要实现这一秒1K QPS，下一秒10W QPS、100W QPS，这种目前只能自有机房的厂家玩（像目前腾讯、阿里云都支持，他们今年也都推出了Faas，目前都在公测阶段），费用也不会低。不过流量到这一级别很多企业早已经用自己系统了，至少目前国情是这样。第三个问题:如何集成日志、监控等工具？1.这个主要分2种，一种提供给用户，一种提供内部使用。2.提供给用户的有函数回调结果日志，定时任务日志。监控QPS流量等。第四个问题:服务问题？1.Faas服务问题是个人认为最难解决的问题，由于各个厂家对Faas的封装没有一个统一的标准，大家代码也互不兼容。并且都封装了一些自己内部的函数，由于发展初期用户很难子啊各大网站找到答案，导致部分用户遇到问题需要人工技术支持才能走入正轨，这是Faas普及的一大难点。第五个问题:安全问题？1.目前市场做防攻击的上市企业防攻击技术是比较成熟的，只要你攻击很快很准确的监控并定位攻击流量，大多数恶意行为都能被监测隔离，被清洗掉。虽然不能吹嘘的像个别企业说能做到：到达服务器的攻击流量也能很快的被隔离，关进小黑屋，不过换个ip 还是可以的，相比一些中小企业直接暴露ip还是安全很多。有些人说Baas 厂家提供的云函数、云逻辑之类不能称之为Faas，主要说出2点。像亚马逊的Lambda，每 100 万个请求 0.20 美元，他们是按照单个请求计费的说Baas的云逻辑没有自动伸缩功能。据我了解虽然没法跟有机房的厂家比，做到类似无限伸缩，不过Bmob、与AV的Faas产品都是可以根据业务定制的。有些人说Baas 随着serverless的发展，以后小公司就不需要运维工程师了个人觉得这天还早，除非国内各大平台的Faas 都能统一标准。这种新型产品，由于需要对外界暴露函数访问域名，目前政策也还不太明朗，如果手动绑定自己域名就加重了使用成本。对于初创团队或者企业新业务来说使用这种服务是最合适的，因为Serverless能做到快、好、省。不过对于Serverless的普及，个人觉得国内难度还是很大，由于完全由第三方管理目前最大的挑战还是信任与服务问题。不过在国内，已经超过10W+开发者已经接受这种模式。