Tablas de datos — columnas.render

Dirección original: https://blog.csdn.net/albenxie/article/details/69389641

El atributo de representación en las columnas puede representar (procesar) los datos que se muestran en la tabla, es decir, puede manipular los datos leídos de la fuente de datos. Este atributo se usa con mucha frecuencia y se puede usar para lograr muchos efectos de uso común en desarrollo. , como la primera columna de la tabla La casilla de verificación, la imagen del avatar en la tabla, el botón de operación en la última columna, etc., el ejemplo correspondiente se dará a continuación.

El método de representación tiene cuatro parámetros, a saber, datos, tipo, fila y meta. Entre ellos, los datos y la fila se utilizan principalmente para las operaciones. Los datos son el valor correspondiente a la celda actual y la fila es el valor correspondiente a todas las celdas de la fila actual.

1. Muestre la primera columna como una casilla de verificación

Se puede implementar en el atributo de columnas o en el atributo columnDefs.

columns: [{
                "data": "name",
                "orderable": false,
                "width": "2%",
                "render": function(data,type,row,meta){
    
    
                    return data = '<input type="checkbox" name="'+data+'">';
                }
            },

columnDefs: [{
                //   指定第四列，从0开始，0表示第一列，1表示第二列……
                "targets": 3,
                "render": function(data, type, row, meta) {
    
    
                    return '<input type="checkbox" name="checklist" value="' + row.name + '" />'
                }
            }],

Utilice el código anterior para mostrar la primera y la cuarta columna como casillas de verificación, el efecto es el siguiente:

Mostrar la columna como un efecto de casilla de verificación

2. Muestre imágenes en una columna de la tabla.

La mayoría de los requisitos para mostrar imágenes se utilizan para mostrar avatares, y 1hay dos formas de lograr lo mismo, principalmente porque la implementación de la función correspondiente de renderizado es diferente.

{
        "data": "img",
        "width": "200px",
        "title": "Avatar",
         render: function (data, type, row, meta) {                                               
             return "<img src='" + data + "' />";
              //还可以给图片加上超链接
             //return "<a href='" + data + "'>" + data + "</a>";
          }
 }

3. Agrega un botón de acción en la última columna.

Este es un requisito muy común, agregue algunos botones para agregar, eliminar, modificar y verificar operaciones en la última columna.

{
       "data": "id",
       "orderable": false, // 禁用排序
       "defaultContent": "",
       "width": "10%",
       "render": function (data, type, row, meta) {
           return data = '<button class="btn btn-info btn-sm" data-id=' + data + '><i class="fa fa-pencil"></i>Edit</button>'
                  + '<button class="btn btn-danger btn-sm" data-id=' + data + '><i class="fa fa-trash-o"></i>Delete</button>';

        }
 }

El efecto es el siguiente:

Mostrar botones en la última columna

4. El personaje es demasiado largo para interceptarlo y mostrarlo.

Cuando el contenido de una determinada columna es demasiado extenso, solo se mostrará una parte y se indicará con más de uno ....

columns: [{
        data: "content",
        render: function(data, type, row, meta) {
            //type 的值  dispaly sort filter
            //代表，是显示类型的时候判断值的长度是否超过8，如果是则截取
            //这里只处理了类型是显示的，过滤和排序返回原始数据
            if (type === 'display') {
                if (data.length > 8) {
                    return '<span title="' + data + '">' + data.substr(0, 7) + '...</span>';
                } else {
                    return '<span title="' + data + '>' + data + '</span>';
                }
            }
            return data;
        }
    }]

También puede usar el método CSS, es decir, agregar el estilo CSS correspondiente a la columna actual:

/* 单元格连续纯字母数字强制换行显示 */
.wordwrap{
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
/* 超长文字单元格省略号显示 */
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
columns: [
        {
            data: "content",
            class: "wordwrap ellipsis"
        }
    ]

5. Agregue los estilos correspondientes según el género

Cuando se utilizan tablas de datos como una lista de información de usuario, a menudo es necesario mostrar el género. Puede realizar ciertas conversiones de acuerdo con el campo de género, como agregar estilos de color o convertirse en los iconos correspondientes de niños y niñas.

          {
                    "data" : "gender",
                    "orderable" : false, // 禁用排序
                    "defaultContent" : "",
                    "width" : "1%",
                    "class": "gender_style",//给当前列添加样式
                    "render": function (data, type, full, meta) {
                        if(data=="male"){
                            return data = '<i class="fa fa-male"></i>';
                        }else{
                            return data = '<i class="fa fa-female"></i>';
                        }
                    }
                }

El efecto es el siguiente: