前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Knockout去实现一个简单的增删改查,来体验一把神奇的MVVM.关于WebApi的剩余部分,博主一定抽时间补上. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得不感叹作为程序猿也真是苦逼,总有学不完的技术,何时是尽头,除非你转化…

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x…

前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解,给需要自定义模板的园友们提供一个参考.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) JS组件系列——Bootst…

前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) JS组件…

$(function () { //$('#table').attr("data-url", "/conference/" + location.href.split("audit/")[1] + "/audits"); var count = 0; var fmtIdx = function (value, row, index) { return index; }; $('.btn-excel').on('click',…

前台进入bootstrap的js和css文件,我就不多少了,另外要引进bootstrap-table的js和css 废话不多说,直接代码.   框架为ssm,代码很清楚 <div class="table_menu_list"> <table class="tablecss table table-striped table-bordered table-hover" id="sample-table"> </tab…

前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就觉得应该快点完成下篇,要不然有点标题党的感觉,思及此,博主心有不安,于是加班赶出了下篇.如果你也打算用ko去做项目,且看看吧! 一.效果预览 其实也没啥效果,就是简单的增删改查,重点还是在代码上面,使用ko能够大量节省界面DOM数据绑定的操作.下面是整个整个增删改查逻辑的js代码: 页面效果: 二.…

二张表的代码(我用的插件,大家可以去网上直接下载http://issues.wenzhixin.net.cn/bootstrap-table/): <div class="container" style="float: left;width:500px;height: 341px"> <div id="toolbar"> <button id="remove" class="btn b…

接着研究bootstrap-table... ... 这一篇研究bootstrap-table的事件及回调函数 先上一个demo HTML <div class="alert alert-danger" id="eventInfo"></div> <table id="goods" data-pagination="true" data-search="true" data-s…

应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大,样式清爽). 然后... ... 开启bootstrap-table填坑之旅. 开始就扒本园的资源,确实有不少bootstrap-table的文章.确实写的不错很详细,请恕本菜实在菜了点,看了半天demo的页面都没弄出来(勿吐槽~~).终于11点了.. .. 于是决定跟着官网的小白教程一点点的玩.…