flexigrid（一）

标签：

引入类库：

<link rel="stylesheet"  type="text/css" href="<%=path%>/js/jquery-flexigrid/css/gray/flexigrid.css" />
<script type="text/javascript" src="<%=path%>/js/jquery-flexigrid/flexigrid.js"></script>

相关HTML代码：

<!--flexigrid 是基于table的所以这里需要一个table元素-->

<table id="teamInfoFlexiGrid"></table>

在文档加载的时候初始化：

$(document).ready(function(){
          initTeamInfoFlexiGrid();
      });

相关js代码：

function initTeamInfoFlexiGrid(){
        $("#teamInfoFlexiGrid").flexigrid({
        url : "http://localhost:8080/test_online/admin/admin_findTeams",
        dataType : "json",
        rp : 15,

　　　autoload : true,//默认为true，设为false时一般用于一个页面有多个flexigrid
        useRp : false,
        colModel : [{
            display : "公司号",//第一列
            width : 100,
            align : "center",
            render : function(val, row) {
                return row.id;
            }
        },{
            display : "公司名",//第二列
            width : 100,
            align : "center",
            render : function(val, row) {
                if(row.name){
                    return "<a href=‘javascript:;‘ onclick=‘showEditBankDiv(" + row.id + ")‘>" + row.name + "</a>";
                }else{
                    return "该公司未登陆！";
                }
                
            }
        },{
            display : "公司信息",
            width : 200,
            align : "left",
            render : function(val, row) {
                return "公司成立年限：" + (row.age == null ? "" : row.age) + "<br/>公司成立时间：" + (row.birthday == null ? "" : row.birthday.substring(0,10)) + "<br/>公司地址：" + (row.address == null ? "" : row.age);
            }
        },{
            display : "公司联系方式",
            width : 200,
            align : "left",
            render : function(val, row) {
                return "公司电话：" + row.tel + "<br/>公司邮箱：" + row.email;
            }
        },{
            display : "备注",
            width : 100,
            align : "center",
            render : function(val, row) {
                return row.remark;
            }
        },{
            display : "操作：",
            width : 100,
            align : "center",
            render : function(val, row) {
                return "<input type=‘button‘ class=‘inputB‘ value=‘删除‘ onclick=‘deleteTeam(" + row.id + ")‘>";//这里只能返回字符串
            }
        }],
        width : "auto",
        height : "370",
        showToggleBtn : false,
        showTableToggleBtn : false,
        singleSelect : true,
        onSubmit : function() {
            //在submit之前需要做的事情
            return true;
        },
        onSuccess : function(grid, data) {
            //执行成功之后需要做的事情
            return true;
        },
        onError : function() {
            //倘若发生错误需要做的事情
            showWaitDiv(false);
        }
        });
    }

flexigrid（一）

标签：

原文地址：http://www.cnblogs.com/queyuexzy/p/4414722.html