layui formSelects-v4復選框總結等table操作記

1: 此組件是layui 官網的擴展組件里里邊的,已經停止升級,但樣式夠用了

 

 

下載地址 :https://fly.layui.com/extend/formSelects/

 

詳細介紹地址

https://hnzzmsf.github.io/example/example_v4.html

 

//1.下載formSelects-v4

//然后引入formSelects.css

<link rel= "stylesheet"  href= "formSelects-v4.css"  />

// 2.模塊化使用

<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //全局定義一次, 加載formSelects
    layui.config({
        base: '../src/' //此處路徑請自行處理, 可以使用絕對路徑
    }).extend({
        formSelects: 'formSelects-v4'
    });
    //加載模塊
    layui.use(['jquery', 'formSelects'], function(){
        var formSelects = layui.formSelects;
         
    });
</script>
 
//3.非模塊化使用
<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var formSelects = layui.formSelects;
     
</script>

我使用的是非模塊使用

js

 layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        // var tableSelect = layui.tableSelect;
        var formSelects = layui.formSelects;

 //選擇 類似級聯,先選第一個,然后獲取此點擊事件,初始化第二個選擇框內內容. 紅色字體 內是初始化第二個選擇框內內容, select1是id local是本地模式,arr 是固定寫法 data.res是數據name 和value數組
        form.on('select(nihaotest)', function(data){
          
                $.ajax({
                    type: 'get',
                    url: '/xxx/xxxxxx/xxxxxxxxx',
                    data: {},
                    async:false,
                    dataType: 'json',
                    success: function (data) {
                        formSelects.data('select1', 'local', { arr: data.res });
                    },
                    error:function(e){
                    }
                });
            }

        })

html

<div class="layui-input-block">
    <select id="nihao" lay-filter="nihaotest" name="xxxx">

 <div class="layui-input-block">
        <select name="xxx" xm-select="select1" id="xxx" lay-filter="xxx" >

 

 

附加: 選擇框時間保留到分鍾

  laydate.render({
                elem: '#open_start'
                , trigger: 'click'
                , type: 'time'
                , format: 'HH:mm'           
            });

 

,templet: '<div>{{layui.util.toDateString(d.showTime, "yyyy-MM-dd") }

 

label文字太多導致與控件換行的問題

<div class="layui-form" style="white-space:nowrap;">

table 圖片放大

,{field:'ffPhoto', title: '照片', width:200, templet: function(res)
 {  if(res.ffPhoto!=null) {
 return "<img onclick=\"showBigImage(this)\" src=\"/xxxxx/xxx.aspx?fileguid="+res.ViolationPhoto+"\" width=90 height=90 >" 
}
 else {return "未上傳";} }} 

    //顯示大圖片 顯示在中心位置
        function showBigImage(e) {
            var x = document.documentElement.clientWidth/4;
             var y = document.documentElement.clientHeight/4;
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
               offset:[y+"px",x+"px"],
                shadeClose: true, //點擊陰影關閉
              //  area:['auto','auto'],
                content: "<img src=" + $(e).attr('src') + " />"
            });
        }

手機端屏幕滾動到底部 非layui

    function goScroll(){
      var top=$(document).height();//Math.abs(parseInt($("body").css("gyform")));
      
      $(window).scrollTop(top);
  }