layUI使用總結


出錯調試:

  1. 按F12查看控制器;
  2. 看調試器,打斷點,按F10 逐步執行;
  3. 看網絡——參數,參數有獲取到值,查看響應;
  4. 以上都沒有解決,看代碼中是否寫錯了標點符號,格式等;

修改保存里的Id:

目的:為了修改某條數據傳入Id,通過Id獲取本條數據

先在窗體中寫出Id字段,並隱藏,  <input id="Id" type="hidden"  />

然后獲取數據庫中的Id,jquery中的格式    var Id = $("#Id").val();

 

layui使用方法:

  1. 獲得 layui 后,將其完整地部署到你的項目目錄,只需要引入下述文件,(1)/layui/css/layui.css   (2)/layui/layui.js ,此處可換成:./layui/layui.all.js
  2. 模塊加載名稱:table,創建一個table實例最簡單的方式是,在頁面放置一個元素 <table id="demo"></table>,然后通過 table.render() 方法指定該容器;

傳值方面:可查看layUI的內置模塊——數據表格,綁定容器、設置數據接口、在表頭設定對應的字段;

  (1)   content: '/AML/Brand/BrandEdit?id=' + data.Id //這里content是一個URL,URL傳值

  (2)  $.post("/AML/Brand/OneEdit", {BrandName:c,Id:@ViewBag.b.Id}, function (res) {// 控制器自定義傳的值BrandName,從控制器中把獲取到的值傳給視圖

1、查詢思路:可查看layUI數據表格文檔——數據表格的重載

示例代碼: //重載
            var $ = layui.$, active = {
                reload: function () { //執行重載
                    table.reload('demo', {
                        page: { curr: 1 //重新從第 1 頁開始 }
                      , where: { //參數
                              ShipNum: $("#OrId").val(),
                              UserName: $("#UName").val(), }
                    }, 'data'); }  };
            $("#sea").on("click", function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : ''; })

2、添加思路:點擊新增按鈕,彈出彈窗,獲取要新增的字段值,輸入要新增的數據,點擊保存按鈕,判斷值是否為true,為true,新增一行數據,關閉窗口並刷新頁面,為false,給出提示,查看代碼是否編譯有誤;

示例代碼: layui.use(['form', 'layer'], function () {
            var form = layui.form, layer = layui.layer;
            //監聽提交
            form.on('submit(formDemo)', function (data) {
                var name=$("#BrandName").val();
                $.post("/AML/Brand/BrandJia", { BrandName: name }, function (res) {
                    if (res.scu) {
                        layer.msg("保存成功");
                        window.setTimeout(function () {
                            //當你在iframe頁面關閉自身時
                            var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
                            parent.layer.close(index); //再執行關閉
                        }, 2000);   
                    } else {
                        layer.alert(res.msg);
                    }
                }, "json")
                return false;
            });

});

3、編輯思路:點擊編輯按鈕,彈出彈窗,並獲取行數據的值,把獲取到的修改后的數據進行保存,點擊保存按鈕,判斷值是否為true,為true,保存數據,關閉窗口並刷新頁面,為false,給出提示,查看代碼是否編譯有誤;

控制器代碼示例:

 var c = db.Order.FirstOrDefault(p => p.Id == OrderId);
            c.State = State;
            int res = db.SaveChanges();
            if (res > 0) { return Json(new { scu = true, msg = "" }); }
            else  {  return Json(new { scu = false, msg = "保存失敗" }); }

視圖示例代碼:  form.on('submit(save)', function(data){
                //     var p = $("#newform").serialize();           
                var c=$("#BrandName").val();// 獲取修改后的數據
                $.post("/AML/Brand/OneEdit", {BrandName:c,Id:@ViewBag.b.Id}, function (res) {// 控制器自定義傳的值BrandName
                    if (res.scu) {
                        layer.msg("保存成功", { icon: 6, time: 2000 });
                        window.setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
                            parent.layer.close(index); //再執行關閉
                        }, 2000)
                    } else {
                        layer.alert(res.Message, { icon: 5 });
                    }
                }, "json")
                return false;
            });

4、刪除思路:  首先要獲取到刪除依據的字段值,並保存數據,

( var b= db.Brand.FirstOrDefault(p => p.Id == id);
            db.Brand.Remove(b);
            int re = db.SaveChanges();),

彈出彈窗給出提示,是否要刪除,點擊確定,判斷數據,為true,刪除數據,關閉窗口並刷新頁面,為false,給出提示,查看代碼是否編譯有誤;

示例代碼: layer.confirm('真的刪除行么', function (index) {
                        var id = data.Id;
                        $.post("/AML/Brand/BrandDel", {id:data.Id}, function (res) {
                            if (res.success == true) {
                                alert("刪除成功");
                                window.location.reload();
                            } else {
                                alert(res.msg);
                            }
                        }, "json");
                        layer.close(index);
                    });

5、監聽頭部工具欄時間:工具欄模板:<script type="text/html" id="toolbarDemo"> </script>  

    //JS 調用: table.render({   elem: '#demo'

          ,toolbar: '#toolbarDemo'

          //,…… //其他參數 })

  //監聽事件:

  table.on('toolbar(test)', function(obj){

  var checkStatus = table.checkStatus(obj.config.id);

6、怎樣JQuery獲取值傳入:

  例如:  $('#Id').val(data.Id);

7、Url傳值:用“?id = ” +data.id

 

1. layUI字段如何轉為string:UserId.ToString();

2.layUI字段如何轉為int: Convert.ToInt32(string)

3.隱藏列字段: 數據表格中的 hide: true 方法

4.字符串去空格: ToString().Trim();

5.方法(值類型)為Null怎么處理:  查看Id字段值是否傳輸正確, int?Id

6.自定義模板:可查看layUI數據表格——temple自定義模板

第一:在數據表格中的列中添加templet方法,templet: '#idTpl',

{field:'id', title: '文章標題', width: 200, templet: '#idTpl'}

第二:在上層加

<script type="text/html" id="idTpl">

  {{#  if(d.State ==0){ }}
    未付款
    {{#  } else if(d.State ==1){   }}
    已付款
    {{#  } else if(d.State ==2){   }}
    已取消
    {{#  } }}

</script>

 
        

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM