关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解


Posted in Javascript onMay 12, 2017

数据库中为datetime类型,.net读取数据已Json格式发回给前台页面:例如:使用bootstrap表格插件Ⅹ

formatter: function (value, row, index) {
            var date = new Date(parseInt(value.slice(6)));
            return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds();
          }

使用bootstrap-editable时需要引用

<script src="~/Scripts/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="~/Scripts/bootstraptable/dist/extensions/editable/bootstrap-table-editable.min.js"></script>

初始化时:

{
          field: 'SkuPurchasePrice',
          title: '采购价',
          align: 'center',
          editable: {
            type: 'text',
            title: '采购价',
            validate: function (v) {
              if (v < 0) return '采购价不能小于0';
            }
          }
        }, {
          field: 'QtyAvailable',
          title: '库存可用量',
          align: 'center',
          editable: {
            type: 'text',
            title: '库存可用量',
            validate: function (v) {
              if (v < 0) return '库存可用量不能小于0';
            },           
          },          
        }

事件:

onEditableSave: function (field, row, oldValue, $el) {
          $.ajax({
            type: 'post',
            url: "@Url.Action("EditNumber")",
            dataType: 'JSON',
            data: { "row": JSON.stringify(row) },
            success: function (data) {
              if (data.ResultType == 0) {
                toastr.success(data.Message);
              }
              else {
                toastr.warning(data.Message);
              }
            },
            error: function () {
              toastr.error("出错了,请联系管理员");
            }
          });
        }

bootstrap-fileinput使用:

引用

<script src="~/Scripts/AdminLTE2.3.0/bootstrap/js/fileinput.min.js"></script>

初始化:

<label class="control-label col-sm-1">商品上传</label>
              <div class="col-sm-2"><input type="file" id="ProductsUpload" name="ProductsUpload" /></div>
              <div class="col-sm-1"><a href="~/ProductsExcel/DownloadTemplate?type=5" rel="external nofollow" target="_blank">下载模板</a></div>
function initFileInput(ctrlName) {
      var control = $('#' + ctrlName);
      control.fileinput({
        language: 'zh', //语言
        uploadUrl: "@Url.Action("ExcelLeadingIn")", //action
        autoReplace: true,
        maxFileCount: 1, //最大上传数量
        allowedFileExtensions: ["xlsx", "xls"],
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,
        enctype: 'multipart/form-data',
        showRemove: true, //是否显示删除按钮
        showBrowse: true, //显示浏览图片按钮
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
        msgInvalidFileExtension:"只支持.xlsx和.xls文件的格式上传",
        fileActionSettings: {
          showUpload: false, //预览图片上传按钮
          showRemove: false, //预览图片remove按钮
          showZoom: false //关闭预览图片按钮
        }
      }).on('fileuploaded', function (event, data, previewId, index) {//上传图触发事件
        if (data.response.state == 1) {
          $('#excelLendingDiv h5').html($('#excelLendingDiv h5').html() + data.response.result+"<br/>");
        }
        else {
          toastr.error(data.response.result);
        }
      }).on('filecleared', function (event) {//remove触发事件
        control.show();
      });
    }

 后台上传:

[HttpPost]
    public ActionResult ExcelLeadingIn()
    {     
      var files = Request.Files;
      string name=files.Keys[0].ToString();
      if (files != null && files.Count > 0)
      {       
        var file = files[0];        
        string path = Server.MapPath("~/Content/excel/") + file.FileName;//文件保存在当前域名下的Content/excel/中
        file.SaveAs(path);       
        string mess = OfferServer.ProductsDetail.InsertExcel(path,file.InputStream,name);
        return Json(new { state = 1, result = mess });
      }
      return Json(new { state = 0, result = "上传发生错误,请检查后重试" });
    }

以上所述是小编给大家介绍的关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery列表拖动排列具体实现
Nov 04 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
JS实现图片预加载之无序预加载功能代码
May 12 #Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 #Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 #Javascript
JS常用正则表达式总结【经典】
May 12 #Javascript
vue.js的安装方法
May 12 #Javascript
You might like
PHP 数组入门教程小结
2009/05/20 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
Symfony核心类概述
2016/03/17 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
python 2.7.14安装图文教程
2018/04/08 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python中按键来获取指定的值
2019/03/02 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python版中国省市经纬度
2020/02/11 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
董事长职责范文
2013/11/08 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
管理提升方案
2014/06/04 职场文书
开展创先争优活动总结
2014/08/28 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
公司处罚决定书
2015/06/24 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技