2017-12-19 10:52:48 ahou2468 阅读数 1770

问题:经常编辑信息时出现通过bootstrap validator校验Ajax请求提交两次问题

原因:可以看到remote那里有一个ajax验证重名,效果是bootstrapValidator没有等ajax拿到返回值就直接拿了一个默认值false走人了导致的该问题;

解决办法:

第一种:提交时先调用一次验证方法,然后通过settimeout方法延迟执行网络请求的方式

$("#commit").click(function(){

var flag = $('#defaultForm').data("bootstrapValidator").isValid();

setTimeout(function(){

var flag2 = $('#defaultForm').data("bootstrapValidator").isValid();

if(flag2){ 

//过500毫米就会执行异步网络请求                          

}, 500);

 });

第二种方式:一般页面编辑状态可以在获取数据以后及时调用验证方法

var codeval = $("#provider_info_form").find("input[name=code]").val();

//编辑状态的话验证数据

if(editable && codeval !=''){

$('#defaultForm').data("bootstrapValidator").isValid();

}


2019-07-15 20:42:43 qq_38964133 阅读数 41

在使用的时候 使用 layui.use 可以进行模块化的加载

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行(异步加载:依赖先执行)+延迟执行
CMD:延迟执行(运行到需加载,根据顺序执行)

页面元素

#####布局

offset4 向右偏移

和bootstrap里面的布局差不多 都是使用删格系统 样式自己进行设置就好了

也是通过类名 进行控制 样式

删格系统的样式 写内联的 在新建一个div 进行编写样式

写在外层的div 简直是乱七八糟的

layui的栅格系统 太不成熟了

#####颜色

layui如何自定义模块 并使用 模块的语法是怎么样的

在官网下载包后

使用jq的方法

layui.use(['jquery', ], function(args) {
        var $ = layui.jquery;

    });

其他的模块如何使用jq呢

layui的模块化 这一块 周末再看看 看的头大 头大

“Fn”+“F5” 或者 “Fn”+“F6” 调节电脑的亮度 否则眼睛实在是太痛了

另外 就是 layui引入jq的方法 是使用lay.use进行引入

晚上回去再看看模块化这一块 看官方文档实在是太难以看懂了

layui使用jquery

layui.use(['jquery',], function(args){
var $= layui.jquery;
//……
});

ar now=new Date(); var 当前日期=now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+" “+now.getHours()+”:"+now.getMinutes()+"-"+now.getSeconds();

将这个插件里面的全部代码都使用一边 踩踩里面的坑 坑

####layui的内置模块笔记

弹出层

使用layui框架 就不需要单独引入layer和jQuery文件

如果是单独引入的框架 就需要引入jQuery文件

  • 两种用法 一种是直接在layer使用 一种是在layer使用

    • 在layer直接使用

      <script src="layer.js"></script>
      <script>
      layer.msg('hello'); 
      </script>
      
    • 在layui中进行使用

      layui.use('layer', function(){
        var layer = layui.layer;
        
        layer.msg('hello');
      });              
      

      在layui中进行使用 就需要通过 use进行调用

  • 参数的配置

    这个为何报错

    $.post('url', {}, function(str) {
                    layer.open({
                        type: 1,
                        content: str //注意,如果str是object,那么需要字符拼接。
                    });
     });
    
  • 定义自己的样式

    layer.open({
      skin: 'demo-class'
    });
    在style标签里面  加上相关的样式
    body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    body .demo-class .layui-layer-btn a{background:#333;}
    body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}自定义
    
  • 自定义高宽

area: ['500px', '300px']

offset设置相应的坐标

加入icon图标 进行加入表情

icon: 5

按钮的相关参数也是写在 layer.open 里面进行

layer.open({
            type: 1,
            area: ['400px', '320px'],
            shade: [0.8, '#393D49'],
            title: '新增',
            btnAlign: 'c',
            btn: ['确认', '取消'],
            yes: function(index, layero) {

            },
            btn2: function(index, layero) {},
            cancel: function() {

            }
   });

layer.open可以在里面进行设置相应相应的参数

日期和时间组件文档

定制版

var ins1 = laydate.render({
            elem: '#test1',
            mark: {
                '0-10-14': '生日',
                '0-12-31': '跨年' //每年12月31日
                    ,
                '0-0-10': '工资' //每个月10号
                    ,
                '2017-8-15': '' //具体日期
                    ,
                '2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
                    ,
                '2017-8-21': '发布'
            },
            done: function(value, date) {
                if (date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017年8月15日,弹出提示语
                    ins1.hint('中国人民抗日战争胜利72周年');
                }
            }
});
为什么没有进行弹出
即时通信

这个稍微关注一下

表单
!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)
数据不能有特殊字符串
if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
  }
  
  //我们既支持上述函数式的方式,也支持下述数组的形式
  //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位,且不能出现空格'
  ] 

当模块有已经依赖 就不需要进行加载模块了

直接调用就可以了

var $ = layui.jquery;

#####加载jq模块 如果其他模块需要使用

// layui.use(['jquery', 'layer'], function() {
        //     var $ = layui.$ //重点处
        //         ,
        //         layer = layui.layer;

    //     //后面就跟你平时使用jQuery一样
    //     $('body').append('hello jquery');
    // });

使用jq

$.post

2018-01-05 11:07:00 baidu_36583119 阅读数 523

(1)Hibernate插入、查询、删除操作 HQL :http://blog.sina.com.cn/s/blog_69fe52e00100zxyd.html
(2)hibernateTemplate 怎样执行hql呢?:https://wenda.so.com/q/1363616729066709
(3)hibernate延迟加载的传说级错误org.hibernate.LazyInitializationException: could not initialize proxy - no Session:http://blog.csdn.net/elfenliedef/article/details/6011892

applicationContext.xml中:
<!-- 指定Spring配置文件的Schema信息 (XMLSchema-instance、beans、context、aop、p、tx)-->
<beans
    xmlns="http://www.springframework.org/schema/beans"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:p="http://www.springframework.org/schema/p"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
                        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                        http://www.springframework.org/schema/aop    
                          http://www.springframework.org/schema/aop/spring-aop-3.0.xsd   
                         http://www.springframework.org/schema/tx    
                          http://www.springframework.org/schema/tx/spring-tx-3.0.xsd 
                          http://www.springframework.org/schema/context
                          http://www.springframework.org/schema/context/spring-context-3.0.xsd"

>
<!-- 配置(第三方依赖包中(使用连接池技术 )的实现类包的)数据源 -->
<bean id ="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">...</bean>
<!-- 定义了Hibernate的SessionFactory -->
<bean id="sessionFactory"  class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">...</bean>
<!-- 定义hibernateTemplate -->
<bean id="hibernateTemplate" class="org.springframework.orm.hibernate3.HibernateTemplate">...</bean>
<!-- 业务操作层(ServiceImpl) -->
<bean id="postService" class="com.serviceImpl.PostServiceImpl"/>
<bean id="studentService" class="com.serviceImpl.StudentServiceImpl"/>
<!-- 开启Spring的Annotation注解处理器 -->
<context:annotation-config />

<!-- 开启Spring的bean自动扫描机制来查找和管理bean实例     -->
<context:component-scan base-package="com"/>
</beans>
IPostService中:
public interface IPostService {
    // 按用户ID进行分页查找
    public List<Post> pagePostsBySid(int sid,int pageNo,int pageSize);
}
PostServiceImpl中:
import org.hibernate.Session;
import org.hibernate.SessionFactory;
public class PostServiceImpl implements IPostService{
    @Resource(name="hibernateTemplate")
    //必须只创建一个HibernateTemplate,是为了让所有操作都在同一个HibernateTemplate的管理下。
    HibernateTemplate template;
    //通过配置文件得到SessionFactory
    SessionFactory sf=template.getSessionFactory();
    //通过SessionFactory 得到一个Session
    Session session=sf.openSession();

    @Override
    public List<Post> pagePostsBySid(int sid, int pageNo, int pageSize) {
        final int pNo=pageNo;
        final int pSize=pageSize;
        final String hql = "from Post as p where p.student.id = ? order by p.id desc";
        List list=template.executeFind(new HibernateCallback<Object>(){
            @Override
            public Object doInHibernate(Session sn) throws HibernateException, SQLException {
                Query query=sn.createQuery(hql);
                query.setString(0, sid);
                query.setMaxResults(pSize);
                query.setFirstResult((pNo-1)*pSize);
                List result=query.list();
                if(!Hibernate.isInitialized(result)){
                    Hibernate.initialize(result);
                }
                return result;
            }

        });
        return result;
    }
}
action中:
import java.util.List;
import com.orm.Student;
import com.opensymphony.xwork2.ActionSupport;
import com.service.IPostService;
import com.service.IStudentService;
public class StudentAction extends ActionSupport{
   @Resource(name="postService")
   IPostService postService;
   @Resource(name="studentService")
   IStudentService studentService;

   private List<Post> postsBySid; //根据学生id搜索的帖子
   private int nowPage;    //当前页
   private int endPage;    //尾页
   private int lastPage;   //上一页
   private int nextPage;   //下一页
   //set...get...
   @Override
    public String execute() throws Exception {
       try{
           pageMyPosts();
          return "MyHome";
       }catch(Exception e){
           e.printStackTrace();
           return ERROR;
       }
    }

    //分页
    private void pageMyPosts() throws Exception{
          Student s=(Student)ServletActionContext.getRequest().getSession().getAttribute("student");
          setStudent(s);
          int pageNo=Integer.valueOf(new String(ServletActionContext.getRequest().getParameter("pageNo").getBytes("iso-8859-1"),"utf-8"));
          setPostsBySid(postService.pagePostsBySid(s.getId(), pageNo, 10)); //调用自定义的pagePostsBySid(int sid, int pageNo, int pageSize)数据分页方法
          setNowPage(pageNo);   //设置
          setLastPage(nowPage-1);  //设置
          setNextPage(nowPage+1);  //设置
          int totalPostCount=postService.getPostCountBySid(s.getId()); //总数据条数
          int totalPage=totalPostCount/10+((totalPostCount%10>0)?1:0);  //每10条数据成一页
          setEndPage(totalPage); //设置
   }
}
struts.xml中:
<!-- 学生管理 -->
 <action name="student" class="com.action.StudentAction">
      <result name="MyHome">/MyHome.jsp</result>
 </action>
jsp中:
<!-- 分页 -->
            <ul class="pagination">
                <s:if test="nowPage!=1">
                   <li><a href="<%=request.getContextPath() %>/student.action?pageNo=1">首页</a></li>
                   <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="lastPage"/>">上一页</a></li>
                </s:if>
                <!-- 判断当前页在小于7的情况下 -->
                <s:if test="nowPage <7">
                   <!-- 判断尾页小于10时 -->
                   <s:if test="endPage <10">
                      <s:iterator var="i" begin="1" end="endPage">
                        <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="#i"/>"><s:property value="#i"/></a></li>
                      </s:iterator>
                   </s:if>
                  <!--  判断尾页大于等于10时 -->
                   <s:else>
                      <s:iterator var="i" begin="1" end="10">
                        <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="#i"/>"><s:property value="#i"/></a></li>
                      </s:iterator>
                   </s:else>
                </s:if>
                <!-- 判断当前页在大于等于7的情况下 -->
                <s:else>
                   <!-- 如果尾页大于当前页加4 -->
                   <s:if test="endPage > nowPage+4">
                      <s:iterator var="i" begin="nowPage-5" end="nowPage+4">
                          <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="#i"/>"><s:property value="#i"/></a></li>
                      </s:iterator>
                   </s:if>
                   <!-- 如果尾页大于当前页,并且小于等于当前页加4 -->
                   <s:else>
                      <s:iterator var="i" begin="nowPage-5" end="endPage">
                          <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="#i"/>"><s:property value="#i"/></a></li>
                      </s:iterator>
                   </s:else>
                </s:else>

                <s:if test="nowPage != endPage">
                   <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="nextPage"/>">下一页</a></li>
                   <li><a href="<%=request.getContextPath() %>/student.action?pageNo=<s:property value="endPage"/>">尾页</a></li>
                </s:if>
        </ul>
2016-12-15 18:05:00 banfu2106 阅读数 91

bootstrap data-loading-text 无效?No!

作者原创,未经允许,拒绝转载。

我们看见的“无效”其实是我们没有看见效果,并不是真正的无效,我在 《bootstrap之状态按钮》 中提到过的业务逻辑代码,执行时需要时间的,这个时间才会显示效果,由于我们写的业务逻辑代码执行时间太短,还没等我们看效果,效果就已经结束了。

以下代码,我进行了延时1秒,相当于业务逻辑代码执行时间是1秒,效果会显示一秒。

$('#myButton').on('click', function () {
  var $btn = $(this).button('loading');
  setTimeout(function () {
      $btn.button('reset');
  }, 1000);
})

 

 

博客已搬家 技术寇的分享

转载于:https://www.cnblogs.com/kouchao/articles/6184259.html

2017-03-31 10:33:03 ZJU_fish1996 阅读数 3647


        使用了bootstrap中的popover.js来显示弹出提示框,发现提示框中是可以嵌入html代码的,所以想尝试着把echarts.js的效果嵌入到提示页面。

        但是强行拼接出现了比较严重的问题,因为echarts.js是在页面刷新的时候调用的,而弹出框的html是动态产生的,所以需要让图表部分的js代码延时执行,以下是我研究出的一个解决方案。


<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/my.css">
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="js/chart.js"></script>
</head>
    <body>

        <div class="row">
            <div class = "col-md-2"></div>
            <div class = "col-md-8">
            <table  class ="table table-hover">
                <tr>
                    <td style="width:10%">
                        <div  name = "article" id = "0" rel="drevil">

                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>   
                       </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>

                </tr>
                <tr>
                    <td style="width:10%">
                        <div  name = "article" id="1" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="2" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="3" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="4" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="5" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="6" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
            </table>

            </div>
            <div class = "col-md-2"></div>
       
       </div>

    <script>
$(function(){
	$("[rel=drevil]").popover({
	            trigger:'manual',
	            placement : 'left', //placement of the popover. also can use top, bottom, left or right
	           //this is the top title bar of the popover. add some basic css
	            html: 'true', //needed to show html of course
	            content : '<div id="test" style="width:180px;height:170px;opacity:0.85;"></div>', //this is the content of the html box. add the image here or anything you want really.
	            animation: false
	        }).on("mouseenter", function () {
	                    var _this = this;
	                    $(this).popover("show").on("mouseover",function(){
	                        load();
                        })
	                    $(this).siblings(".popover").on("mouseleave", function () {
	                        $(_this).popover('hide');
	                    }
	                    );
	                }).on("mouseleave", function () {
	                    var _this = this;
	                    setTimeout(function () {
	                        if (!$(".popover:hover").length) {
	                            $(_this).popover("hide")
	                        }
	                    }, 100);
	                });
})
</script>

    </body>
</html>

引用的一些文件:


my.css

.nonfull{
stroke:rgb(100,100,100);fill:rgb(255,255,255);cx:10;cy:10;r:5;stroke-width:1
}

.full{
stroke:rgb(100,100,100);fill:rgb(100,100,100);cx:10;cy:10;r:5;stroke-width:1
}

.rating{font-size: 14px;line-height: 1.2;}

.leave{margin-top:10px;font-size:1.2em}

.over{border-radio:5px;margin-top:10px;font-size:1.2em;background-color:rgb(66,165,245);color:white}

chart.js

function load() {
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });


// 使用
    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('test'));

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        type: 'pie',
                        radius: '36%',
                        center: ['50%', '50%'],
                        data: [
                            {value: Math.random()*100, name: '正面'},
                            {value: Math.random()*100, name: '负面'},
                            {value: Math.random()*100, name: '客观'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
    );
}


没有更多推荐了,返回首页