jQuery插件开发的两种方法及$.fn.extend 定制列表

最新推荐文章于 2020-12-24 13:09:10 发布

Alan_阿兰

最新推荐文章于 2020-12-24 13:09:10 发布

阅读量435

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery开发

本文链接：https://blog.youkuaiyun.com/sixteen_cicle/article/details/53910713

Jquery开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用自定义JavaScript方法为表格添加列的方法。该方法通过扩展jQuery的功能来实现，允许开发者指定模板ID、是否显示选择框等选项，并能够从服务器获取配置信息以动态创建表格列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到通过自定义js方法自定义添加表格列
// 调用
//绘制表格
       // $("#tablelist").listTable({
       //    'templetid':'partner.userlist',//模板号
       //    'isSelect':isCheckBox, //是否显示选中行,默认不显示
       //    'version':'V1.0',//版本号
       // });

$.fn.extend({
    listTable:function(options){
    var _GID = "ow.querylistdata";
    if(!options.GID){options.GID =  _GID};
    var curColumns = [];
    var isSelect = options.isSelect;
    //var _self = this;
    var param ={'curpage': '1','pagesize' : '10'};
    //jquery $.getJSON()跨域请求
    var url = sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime();
    $.getJSON(url,{"GID":"ow.querylistcreator","templetid":options.templetid},function(res){
        
    //res返回样式数据
    // Object {templetname: "查询下属机构列表", columns: Array[8], dono: "partner.orglist", version: "V1.0"}columns: Array[8]dono: "partner.orglist"templetname: "查询下属机构列表"version: "V1.0"__proto__: Object
    for(var i=0;i<res.length;i++){
        var listColumns = {};
        for(var key in res.columns[i] ){
            if(json.columns[i]["colname"]){
                        listColumns.field=json.columns[i]["colname"];
                    }
            if(json.columns[i]["title"]){
                        listColumns.title=json.columns[i]["title"];
                    }
            if(json.columns[i]["colvisble"]==false){
                        listColumns.visible=json.columns[i]["colvisble"];
                    }
            if(json.columns[i]["align"]){
                        listColumns.align=json.columns[i]["align"];
                    }
            if(json.columns[i]["sortable"]){
                        listColumns.sortable=json.columns[i]["sortable"];
                    }
            if(json.columns[i]["width"]){
                        listColumns.width=json.columns[i]["width"];
                    }

        };
        curColumns.push(listColumns);
    }
    if(isSelect){
        var colSelect ={field:"",checkbox:"",align:"",valign:"",width:"",};
        curColumns.unshift(colSelect);
    }
    createTableFn(curColumns);//绘制表格方法
}
});
/**/
function createTableFn(col){
    this.bootstrapTable('destroy');
    this.bootstrapTable({
        url:sWebRootPath+"/json/getAjaxData.jsp",
        method: 'post',
        striped: true,
        //获取查询参数
        queryParams:function(queryParams){

        },
        sortable:true,
        cache: false,
        //分页相关
        pagination: true,
        pageNumber:param.curpage,
        pageSize:param.pagesize,
        sidePagination: "server",
        search: true,
        sortable:true,
        showRefresh: true,
        clickToSelect: true,
        //加载成功执行
        onLoadSuccess:function(){

        },
        onLoadError:function(){

        },
        columns:col,
    });
    //end
};



});