码迷,mamicode.com
首页 > 其他好文 > 详细

DWZ动态Table

时间:2015-12-17 12:19:58      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:

<!-- index.jsp>>>index>>>固定资产管理 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/devuxTags.jsp"%>
<div class="pageContent">
    <div class="panelBar">
        <ul class="toolBar">
            <li><a class="add"><span>添加</span></a></li>
            <li><a class="delete"><span>删除</span></a></li>
            <li><a class="edit" title="修改"><span>修改</span></a></li>
            
            <li class="line">line</li>
            
        </ul>
        <select class="combox" id="fixedAssetsType">
            <option value="computer">计算机主机</option>
            <option value="50">计算机显示器</option>
            <option value="100">办公桌</option>
            <option value="200">办公座椅</option>
        </select>
    </div>
    
    <div id="jTableDynamic99999"></div>

 

<script type="text/javascript">
(function($) {
    $.fn.jTableDynamic = function(options) {
        options = $.extend(true, {
            cols: [],
            url: "",
            pagging: false,
            numPerPage: 10
        }, options);

        var $table = $(this);
        loadDynamicTableData = function(numPerPage, pageNum) {
            $table.html(‘<table class="table" width="100%"><thead></thead><tbody></tbody></table>‘);
            if (options.pagging) {
                var pagination = ‘<div class="panelBar">‘ + ‘<div class="pages"><span>每页显示</span>‘ + ‘<select class="combox" name="numPerPage"><option value="10">10</option><option value="20">20</option><option value="50">50</option></select>‘ + ‘<span>条,共<label id="totalCount"></label>条</span></div>‘ + ‘<div class="pagination" targetType="" totalCount="150" numPerPage="10" pageNumShown="10" currentPage="1"></div></div>‘;
                $table.append(pagination);
            }
            var cols = options.cols;
            var fixedAssetsHead = "<tr>";
            for (var idx = 0; idx < cols.length; idx++) {
                var col = cols[idx];
                fixedAssetsHead += ‘<th width="‘ + col.width + ‘px">‘ + ‘<div class="gridCol" title="‘ + col.name + ‘" style="text-align:center;">‘ + col.name + ‘</div></th>‘;
            }
            fixedAssetsHead += ‘</tr>‘;
            $table.find(‘thead‘).html(fixedAssetsHead);
            $.ajax({
                type: ‘POST‘,
                url: options.url,
                data: {
                    numPerPage: numPerPage,
                    pageNum: pageNum
                },
                dataType: ‘json‘,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                async: false, // 处理页面初始化用ajax获取并设置表格内容后,表格没有点击事件、单元格不对齐等。
                success: function(respMsg, textStatus, jqXHR) {
                    if (respMsg.code == 200) {
                        var data = respMsg.data;
                        var rows = data.rows;
                        var total = data.total;
                        if (rows instanceof Array) {
                            $table.find(‘#totalCount‘).html(total);
                            var content = "";
                            try {
                                for (var idxd = 0; idxd < rows.length; idxd++) {
                                    content += ‘<tr target="sid_user" rel="‘ + idxd + ‘" class="">‘;
                                    for (var idx = 0; idx < cols.length; idx++) {
                                        var col = cols[idx];
                                        content += "<td>" + rows[idxd][col.code] + "</td>";
                                    }
                                    content += "</tr>";
                                }
                                $table.find("select[name=‘numPerPage‘]").val(numPerPage);
                                $table.find(‘.pagination‘).attr("totalCount", total);
                                $table.find(‘.pagination‘).attr("currentPage", pageNum);
                                $table.find(‘.pagination‘).attr("numPerPage", numPerPage);
                            } catch (exception) {
                                content = "";
                                alertMsg.error(‘表格数据格式不正确!‘);
                            }
                            $table.find(‘tbody‘).html(content);
                        } else {
                            alertMsg.error(‘服务器返回的表格数据格式不正确!‘);
                        }
                    } else {
                        alertMsg.error(‘查询表格数据时发生错误!\n‘ + respMsg.msg);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alertMsg.error(‘请求表格数据时发生错误!‘);
                }
            });
        }

        loadDynamicTableData(10, 1);

        dwzPageBreak = function(options) {
            var numPerPage = $table.find("select[name=‘numPerPage‘]").val();
            var pageNum = options.data.pageNum;
            loadDynamicTableData(numPerPage, pageNum);
            $($(‘div.page.unitBox‘)[1]).initUI();
        }

        $table.find(‘select[name="numPerPage"]‘).live("change", function() {
            loadDynamicTableData($(this).val(), 1);
            $($(‘div.page.unitBox‘)[1]).initUI();
        });
        $table.selectedRow = function() {
            if (!$table.find("tr.selected").length)
                return null;
            else
                return $table.find("tr.selected");
        }

        return $table;
    };
})(jQuery);

$(function() {
    var fixedAssetsOptions = {
        computer: {
            url: "fixedAssets/computerList",
            options: [{
                code: "id",
                name: "设备编号",
                width: 100
            }, {
                code: "brand",
                name: "品牌",
                width: 200
            }, {
                code: "cpu",
                name: "CPU",
                width: 300
            }, {
                code: "memory",
                name: "内存",
                width: 200
            }, {
                code: "harddisk",
                name: "硬盘",
                width: 300
            }]
        },
        monitor: {}
    };
    var fixedAssetsTypeOptions = fixedAssetsOptions[$(‘#fixedAssetsType‘).val()].options;
    var fixedAssetsTypeURL = fixedAssetsOptions[$(‘#fixedAssetsType‘).val()].url;


    var $table = $(‘#jTableDynamic99999‘).jTableDynamic({
        cols: fixedAssetsTypeOptions,
        pagging: true,
        url: ‘<%= basePath%>‘ + fixedAssetsTypeURL
    });

    $(".toolBar").find(".delete").live("click", function() {
        var selectedRow = $table.selectedRow();
        if (selectedRow) {
            alertMsg.confirm("您确定要将选中的数据删除?!", {
                okCall: function() {
                    var rel = selectedRow.attr("rel");
                }
            });
        } else
            alertMsg.error(‘未选中行!‘);

    });

    $(".toolBar").find(".edit").live("click", function() {
        var selectedRow = $table.selectedRow();
        if (selectedRow) {
            var rel = selectedRow.attr("rel");
            var url = "<%= basePath%>fixedAssets/computerEdit?cid=" + rel; 
            $.pdialog.open(url, "rel", "修改信息", {mask:true});
        } else
            alertMsg.error(‘未选中行!‘);
    });

});
</script>

  

DWZ动态Table

标签:

原文地址:http://www.cnblogs.com/devux/p/5053259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!