zoukankan      html  css  js  c++  java
  • (转)jqGrid自定义列的样式

    本文转载自:http://blog.csdn.net/gaofang2009/article/details/5870451

    1、自定义的为一个超链接样式

    2、点击链接时,会执行指定的方法,而不是跳转到某页面

    3、点击编辑时,是原始的数据格式,而不是重新定义的样式

    作法,扩展formatter的值

     /*扩展自定义格式*/
                jQuery.extend($.fn.fmatter, {
                    userLinkFmatter: function (cellvalue, options, rowdata) {
                        var op = { onclick: options.onclick };
                        var onclick = "";
                        if (!isUndefined(options.colModel.formatoptions)) {
                            op = $.extend({}, op, options.colModel.formatoptions);
                        }
                        if (op.onclick) { onclick = 'onclick="' + op.onclick + '(/'' + cellvalue + '/',/'' + rowdata + '/')"'; }
                        if (!isEmpty(cellvalue)) {
                            return "<a href='javascript:' " + onclick + ">" + cellvalue + "</a>";
                        } else {
                            return $.fn.fmatter.defaultFormat(cellvalue, options);
                        }
                    }
                });
    	   /*去掉自定义的样式,返回的是原始的数据格式*/
                jQuery.extend($.fn.fmatter.userLinkFmatter, {
                    unformat: function (cellvalue, options) {
                        var valNum = cellvalue.toString().indexOf(">");
                        if (valNum >= 0) {
                            var html = cellvalue.substring(valNum + 1);
                            valNum = html.toString().indexOf("<");
                            html = html.substring(0, valNum);
                            return html;
                        }
                        else {
                            return cellvalue;
                        }
                    }
                
    调用示例:
    colModel: [
               { name: 'UnitName', index: 'UnitName', align: "center", editable: true,
    editrules: { required: true }, formatter: 'userLinkFmatter'
                 formatoptions: { onclick: "formatUnit" }
    },
    formatUnit为一个自己写的js方法示例:
     function formatUnit(cellvalue, rowdata) {
    //自已的事件代码
    alert(cellvalue);
    }
    效果如下:

    编辑时,是原始的数据格式:
  • 相关阅读:
    大厂面试系列(七):数据结构与算法等
    大厂面试系列(六):Redis和缓存等
    大厂面试系列(五):Dubbo和Spring Cloud
    大厂面试系列(四):Spring相关
    大厂面试系列(二):并发编程
    大厂面试系列(二)::NIO和Netty
    大厂面试系列(一)::JVM基础
    Plugin 'org.apache.tomcat.maven:tomcat7-maven-plugin:' not found
    Spring源码在编译过程中的几个问题
    vue.js Interpolation inside attributes has been removed.
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/2288031.html
Copyright © 2011-2022 走看看