关于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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
微信小程序 支付功能实现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语法检查的方法总结
2019/01/21 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JS中Location使用详解
2015/05/12 Javascript
javascript连续赋值问题
2015/07/08 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
详解Python发送邮件实例
2016/01/10 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
家教广告词
2014/03/19 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
面试通知邮件
2015/04/20 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
分享7个 Python 实战项目练习
2022/03/03 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang