jQuery Bootgrid插件

jQuery Bootgrid插件

jQuery Bootgrid是基于bootstrap的轻量级响应式表格插件，支持分页，每页显示条数，点击头部排序等，跨浏览器的支持：IE, Firefox, Chrome, Safari, Opera等。

jQuery Bootgrid文档链接： http://www.jquery-bootgrid.com/Examples#data.

下面是实际的案例： deptleaderaudit.html文件。

<table id="grid-data" class="table table-condensed table-hover table-striped">
							        <thead>
							            <tr>
							                <th data-column-id="user_id" data-identifier="true" data-type="numeric">申请人</th>
							                <th data-column-id="leave_type">类型</th>
							                <th data-column-id="start_time">请假开始时间</th>
							                <th data-column-id="end_time">请假结束时间</th>
							                <th data-column-id="reason">请假原因</th>
							                <th data-column-id="taskid">任务ID</th>
							                <th data-column-id="taskname">任务名称</th>
							                <th data-column-id="process_instance_id" >流程实例ID</th>
							                <th data-formatter="taskcreatetime" data-column-id="taskcreatetime">任务创建时间</th>
							                <th data-formatter="commands">操作</th>
							            </tr>
							        </thead>
							    </table>

下面展示一些 deptleaderaudit.js文件。

$(document).ready(function () {
    $("#dept").hide();
    var grid = $("#grid-data").bootgrid({
        navigation: 2,
        columnSelection: false,
        ajax: true,
        url: "depttasklist",
        formatters: {
            "taskcreatetime": function (column, row) {
                return getLocalTime(row.taskcreatetime);
            },
            "commands": function (column, row) {
                return "<button class=\"btn btn-xs btn-default ajax-link command-run1\" data-row-id=\"" + row.taskid + "\">处理</button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        grid.find(".command-run1").on("click", function (e) {
            var taskid = $(this).data("row-id");
            $.post("dealtask", {"taskid": taskid}, function (data) {
                var obj = data;
                $("#reason").val(obj.reason);
                $("#type").val(obj.leave_type);
                $("#userid").val(obj.user_id);
                $("#startime").val(obj.start_time);
                $("#endtime").val(obj.end_time);
                $("#applytime").val(obj.apply_time);
                $("form").attr("action", "task/deptcomplete/" + taskid);
            });
            $("#dept").show();
            $("#btn").click(function () {
                $.post("task/deptcomplete/" + taskid, $("form").serialize(), function (a) {
                    alert("处理成功");
                    LoadAjaxContent("deptleaderaudit");
                });

            });
        });


    });
});

function getLocalTime(nS) {
    return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
}

下面展示一些 ActivitiController.class文件。

@ApiOperation("获取部门领导审批代办列表")
	@RequestMapping(value = "/depttasklist", produces = {
			"application/json;charset=UTF-8" }, method = RequestMethod.POST)
	@ResponseBody
	public DataGrid<LeaveTask> getdepttasklist(HttpSession session, @RequestParam("current") int current,
			@RequestParam("rowCount") int rowCount) {
		DataGrid<LeaveTask> grid = new DataGrid<LeaveTask>();
		grid.setRowCount(rowCount);
		grid.setCurrent(current);
		grid.setTotal(0);
		grid.setRows(new ArrayList<LeaveTask>());
		// 先做权限检查，对于没有部门领导审批权限的用户,直接返回空
		String userid = (String) session.getAttribute("username");
		int uid = systemservice.getUidByusername(userid);
		User user = systemservice.getUserByid(uid);
		List<User_role> userroles = user.getUser_roles();
		if (userroles == null)
			return grid;
		boolean flag = false;// 默认没有权限
		for (int k = 0; k < userroles.size(); k++) {
			User_role ur = userroles.get(k);
			Role r = ur.getRole();
			int roleid = r.getRid();
			Role role = systemservice.getRolebyid(roleid);
			List<Role_permission> p = role.getRole_permission();
			for (int j = 0; j < p.size(); j++) {
				Role_permission rp = p.get(j);
				Permission permission = rp.getPermission();
				if (permission.getPermissionname().equals("部门领导审批"))
					flag = true;
				else
					continue;
			}
		}
		if (flag == false)// 无权限
		{
			return grid;
		} else {
			int firstrow = (current - 1) * rowCount;
			List<LeaveApply> results = leaveservice.getpagedepttask(userid, firstrow, rowCount);
			int totalsize = leaveservice.getalldepttask(userid);
			List<LeaveTask> tasks = new ArrayList<LeaveTask>();
			for (LeaveApply apply : results) {
				LeaveTask task = new LeaveTask();
				task.setApply_time(apply.getApply_time());
				task.setUser_id(apply.getUser_id());
				task.setEnd_time(apply.getEnd_time());
				task.setId(apply.getId());
				task.setLeave_type(apply.getLeave_type());
				task.setProcess_instance_id(apply.getProcess_instance_id());
				task.setProcessdefid(apply.getTask().getProcessDefinitionId());
				task.setReason(apply.getReason());
				task.setStart_time(apply.getStart_time());
				task.setTaskcreatetime(apply.getTask().getCreateTime());
				task.setTaskid(apply.getTask().getId());
				task.setTaskname(apply.getTask().getName());
				tasks.add(task);
			}
			grid.setRowCount(rowCount);
			grid.setCurrent(current);
			grid.setTotal(totalsize);
			grid.setRows(tasks);
			return grid;
		}
	}

下面展示一些 ActivitiController.class文件

@RequestMapping(value = "/dealtask", method = RequestMethod.POST)
	@ResponseBody
	public LeaveApply taskdeal(@RequestParam("taskid") String taskid, HttpServletResponse response) {
		Task task = taskservice.createTaskQuery().taskId(taskid).singleResult();
		ProcessInstance process = runservice.createProcessInstanceQuery().processInstanceId(task.getProcessInstanceId())
				.singleResult();
		LeaveApply leave = leaveservice.getleave(new Integer(process.getBusinessKey()));
		return leave;
	}

下面展示一些 LeaveApplyMapper.xml文件。

<select id="getLeaveApply" resultType="boot.spring.po.LeaveApply" parameterType="int">
		select * from leaveapply where id=#{id} 
	</select>

下面展示一些 ActivitiController.class。

	@RequestMapping(value = "/task/deptcomplete/{taskid}", method = RequestMethod.POST)
	@ResponseBody
	public MSG deptcomplete(HttpSession session, @PathVariable("taskid") String taskid, HttpServletRequest req) {
		String userid = (String) session.getAttribute("username");
		Map<String, Object> variables = new HashMap<String, Object>();
		String approve = req.getParameter("deptleaderapprove");
		variables.put("deptleaderapprove", approve);
		taskservice.claim(taskid, userid);
		taskservice.complete(taskid, variables);
		return new MSG("success");
	}

参数：
ajax : 必须设置为true
post : 传送给java的参数
url : 与java连接的方法名
formater : 在html中自定义属性名，然后在这显示按钮或者图片的html
navigation : 表的样式，0，1,2有表尾，3有表头和表尾
rowSelect : true 和selection : true 都为true时列表可以被选择
rowCount : 一个页面最多显示的记录数
responseHandler : 可以在这里设置页面上返回数据的形式，内容 tempaltes : 设置表的样式，对表的表头或表脚
label : 设置提示信息的内容
页面加载完成后 ：
on(‘loaded.rs.jquery.bootgrid’,function(){})

想建个和二进制打交道的群，一起讨论，毕竟成长道路挺孤单的。
微信:OK7733YY，qq:9966199983，谢谢大家。