关于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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
javascript 写类方式之二
2009/07/05 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
VueJs组件prop验证简单介绍
2017/09/12 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python计算信息熵实例
2020/06/18 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
护士求职推荐信范文
2013/11/23 职场文书
大学军训感言800字
2014/02/27 职场文书
法定代表人授权委托书
2014/04/04 职场文书
残疾人小组计划书
2014/04/27 职场文书
质量负责人任命书
2014/06/06 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
齐云山导游词
2015/02/06 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书