easyUI的DataGrid自定义视图显示，使用view自定义视图后formatter失效。

        之前使用easyUI显示数据都是以表格的形式进行展示，但是有的情况下为了好看不用那种横竖分明的表格，而是要把列的数据放下自定义的位置上面。查阅api和官方的demo，使用view可以实现这种效果，先贴上代码。

 

//这里是重写了view，按照自己的排版来显示
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
        renderRow: function(target, fields, frozen, rowIndex, rowData){
            var cc = [];
            cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
            if (!frozen){
                cc.push('<img src="${base}/res/common/img/xiaoyazi.gif" style="width:100px;float:left">');
                cc.push('<div style="float:left;margin-left:20px;">');
                for(var i=0; i<fields.length; i++){
                    var copts = $(target).datagrid('getColumnOption', fields[i]);
                    if( fields[i] == "itemid"){
                        cc.push('<p><span class="c-label">' + copts.title + ':</span><a href="javascript:void()">' + rowData[fields[i]] + '</a></p>');
                    }else{
                        cc.push('<p><span class="c-label">' + copts.title + ':</span>' + rowData[fields[i]] + '</p>');
                    }
                }
                cc.push('</div>');
            }
            cc.push('</td>');
            return cc.join('');
        }
    });

    $(function(){
        $('#tt').datagrid({
            url:' ${base}/diLiWeiZhi/getAddInfo.do',
            view: cardview,
            onClickRow:function(rowIndex, rowData){
                var point= rowData['listprice'];
                //传送id去后台查找数据
                findDataAndMark(point);
            }
        });

    });

下面这个这个就是效果图：

 

展示的效果是实现了，我接下来要点击数据行然后去处理其他的业务。使用formatter格式化某一列的数据

<th   data-options="field:'itemid',formatter:diwo " >工程名称</th>

但是这个diwo()这个函数没有去执行，被view给覆盖了不会去执行，我又想直接在view里面加上这个函数 ，点击事件然后去处理业务。

   cc.push('<p><span class="c-label">' + copts.title + ':</span><a href="javascript:void()" onclick="diwo('+rowData[fields[i]]+')">' + rowData[fields[i]] + '</a></p>');

点击的时候又报错了，报传的值未定义。在view里面通过函数往外传值是传不出去了。

查阅API  easyUI还有个点击行事件  点击某一行返回这一行的数据。那么后续的业务就可以继续处理了。

 $(function(){
        $('#tt').datagrid({
            url:' ${base}/diLiWeiZhi/getAddInfo.do',
            view: cardview,
            onClickRow:function(rowIndex, rowData){
                var point= rowData['listprice'];
                //传送id去后台查找数据
                findDataAndMark(point);
            }
        });

    });