我是如何做列表页的
最近难得公司业务稍微缓解一些，我们终于有时间静下心总结下技术，对于之前的项目去其糟粕取其精华，我们的目的是：
- 解决后台管理系统的开发效率问题，封装常用功能，将技术性强的内容分离出去；
- 将重复性高的开发工作统一技术规范，避免各自研究；
- 采用最佳实践，参考优秀项目，制定最佳方法，至少是最适合当前团队的。
这里我先总结下我这块针对数据列表页的做法，后续再补充其它模块的做法，先看下列表页的需求：
- 搜索条件支持动态条件查询，后端不需要干预相关条件的组装；即不能出现类似如下的代码（注：此做法只针对单表的查询，如果是非常复杂的多表关联，此方案也许不是最佳的）
- 查询异步，用户点击下一页时如果需要刷新整个页面体验性不太好。
上面这两需求非常常规，有很多种实现方式，我分享下我的做法（我的环境是eclipse,tomcat,maven,spring mvc, mybatise,mysql）：
针对动态查询，我们通过约定规则来实现，比如View中我们可以这样写
它的意思是查询email字段，操作符是=号。WHERE是固定的，后台解析收集条件时做识别作用，中间的是字段名称，后面是操作符，操作符比如有EQ,LIKE等常规的数据库查询操作符。这样我们可以在前端任意增加修改条件，而后台的逻辑是不需要有任务变更的，详细的收集过程请看本文后面的介绍。
针对异步查询，我采用了angularjs相关技术，当时遇到一个问题：angularjs在查询时一般都会指定一个写好的model传递到后台，但由于上面动态查询的条件是变动的（字段名称不固定，字段数量不固定，操作类型不固定），所以没有办法去定义这样的model。第一直觉是将整个表单传递到后台，后台根据表单的值来解决特定的条件，第二个问题来了，既然是将表单传递到后台，那么后台要用什么参数来接收这个表单呢，于时想到HttpServletRequest，但经过测试，这个参数始终取不到值，当时的代码如下：
java
js
后来和同事讨论说是需要设置ajax的contentType为application/x-www-form-urlencoded，但设置后直接报错，请求无法到达服务端，说明参数类型匹配错误，将后台controller方法中的参数HttpServletRequest删除后顺利通过。但这个参数删除了，表单值从哪取呢？好在后端也可以取到当前请求，RequestContextHolder可以帮助我们，于是下面的代码就水到渠成了，通过这个帮助类我们可以从请求中根据我们制定的规定来解析条件，至于条件对象的格式，主要看数据访问端的使用情况，这里先不贴代码了，我们主要采用的是通用mapper那套方案，网上可去搜索。到此，问题解决了，数据也可以顺利查到了。
列表数据的展示，我没有采用jquery datatable之类的控件，我感觉需要写JS代码，看起来比较复杂，采用angularjs的ng-repeat非常直观，且容易控制细节。
分页控制我们采用了angularjs与boostrap的一个插件完成,需要引用ui-bootstrap-tpls.min.js以及boostrap-ui相关的代码才行：
jquery.dataTables 的简单应用
jquery.dataTables 为大家提供了丰富的表格渲染方案和分页方案 特别的适合后台应用
Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM，javascript，Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 （ MIT license ）！ 商业支持
更多特性请到官网查看
nodejs小聂在后台进行了简单的应用
其实实现这样的分页效果很容易 几行代码即可
$(document).ready(function () {
$(\”#myTable\”).dataTable({
\”bProcessing\”: false, // 是否显示取数据时的那个等待提示
\”bServerSide\”: true,//这个用来指明是通过服务端来取数据
\”sAjaxSource\”: \”?ajax=pagePageInfo\”,//这个是请求的地址
\”bDeferRender\”: true,
\”bInfo\”: true,
\”columnDefs\”: [{
// 定义操作列
\”targets\”: 5,
\”data\”: null,
\”render\”: function (data, type, row) {
var html = \'<a href=/admin/blog/?ajax=edit&id=\’ + row._id + \’
class=\”delete btn btn-default btn-xs\”><i class=\”fa fa-times\”></i>编辑</a>\’;
return html;
}
}, {
// 定义操作列
\”targets\”: 6,
\”data\”: null,
\”render\”: function (data, type, row) {
var html = \”<a href=# onclick=\\\”return delnews(\’\” + row._id + \”\’)\\\”
class=\\\”delete btn btn-default btn-xs\\\”><i class=\\\”fa fa-times\\\”></i>删除</a>\”
return html;
}
}],
buttons: [\’colvis\’, \’excel\’, \’print\’],
\”columns\”: [
{\”data\”: \”title\”},
{\”data\”: \”column\”},
{\”data\”: \”created\”},
{\”data\”: \”create_username\”},
{\”data\”: \”yuedu\”},
{\”data\”: \”_id\”}
]
});
});
这样就可以很方便的实现数据渲染和分页 适合应用于后台 推荐大家使用 另外还有优点就是支持前端排序 前端数据搜索 等的功能 无需再次开发 就可以方便的拥有一些常用的功能 对后台开发非常有用 推荐大家使用
http://www.niefengjun.cn/blog/cefb21f80392f4bc130ef6a15188013e.html
原生ajax和django结合bootstrap-table，jquery与ajax的使用
浏览网页的时候，整个网页刷新叫全局刷新，只是部分显现叫局部刷新，代替浏览器发起请求并接收响应数据的对象叫异步请求对象（XMLHttpRequest），创建异步对象的语法：
var xml=new XMLHttpRequest();
ajax（asynchronous javascript and xml）就是一种无需重新加载整个网页的情况下，更新部分网页内容的方法。
XMLHttpRequest方法有：
open(请求方式，服务器端访问地址，异步true还是同步false)
send(要发送的数据)使用异步对象发送请求
setRequestHeader(header，value)用于设置请求头
getAllResponseHeaders()获取所有响应头
getResponseHeader()获取响应头中指定的header的值
abort()终止请求
属性有：
ReadyState（0是初始化值，1代表执行open，2代表执行send，3代表异步对象拿到数据，4代表处理数据完毕），status（200代表请求成功，404代表服务器资源没有找到，500代表服务器内部代码有误），responseText（表示服务器端返回的数据）
使用步骤：
1,创建对象, var xml=new XMLHttpRequest();
2,给异步对象绑定onreadystatechange事件，xml.onreadystatechange=function(){根据ReadyState值做请求处理相关代码}
3,初始请求参数，执行xml.open(“get”,”/index”,true)函数
4,发送请求，执行xml.send(“name=root;pwd=123”)函数
Html中定义一个叫xhr的ajax对象，
View.py中函数定义，ajax_json返回ret字典
网页展示：
如下图html中定义了一个edit按钮，里面调用edit_server这个函数，这个函数通过bootstrap-table的formatter函数传入一个row.id参数，row.id代表了列表中一整行的元素。点击edit按钮后，会得到这里的url返回的数据，这里除了可以打印到console也显示到了前端的table区域了。
Html端jquery函数传入一个id参数，视图函数这边根据传入的参数，找到这个id对应的相关字段，再返回给前端显示。
console输出：
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
