easyUI 中datagrid使用总结

刺骨的言语ヽ痛彻心扉 2022-06-17 12:37 247阅读 0赞

//js基本使用结构：

$('#table').datagrid({
        url: "",
        queryParams: {
            name:name,
            id:id
        },
        fitColumns: fitColumns,//自适应宽度 maxHeight: 700,
        resizeHandle: "right",
        pagination: false,
        singleSelect: false,
        checkOnSelect: false,
        remoteSort: true,
        showHeader: true,
        autoRowHeight: true,
        scrollbarSize:5,
        frozenColumns:[frozenColumns],
        columns: [dataGrid],
        onLoadSuccess: function (data) {}

});

//针对于frozenColumns，dataGrid可以动态生成，根据后台传过来的值拼接成字符串，如下：

for (var i = 0; i < data.length; i++) {
        var returnStr = "",sortable=true;
        if(dataFrozen[i].can_order==true){
            sortable=true;
        }else{
            sortable=false;
        }
        if (data[i].input_type == "label") {
            dataGrid += "{field: '" + data[i].produce_field + "', title: '" + data[i].field_ch + "',sortable: '"+sortable+"', align: 'center', width: 200";
        } else {
            dataGrid += "{field: '" + data[i].produce_field + "', title: '" + data[i].field_ch + "',sortable: '"+sortable+"', align: 'center', width: 200,formatter: function (value, row) {";
            if (data[i].input_type == "text" && data[i].data_type == "none") {
                returnStr = '<input type="text" name="' + data[i].produce_field + '" stepName="'+data[i].stepName+'" title="'+data[i].field_ch+'" class="form-control" value="">';
            } else if (data[i].input_type == "text" && data[i].data_type == "number") {
                returnStr = '<input type="number" name="' + data[i].produce_field + '" stepName="'+data[i].stepName+'" title="'+data[i].field_ch+'" class="form-control" value="">';
            } else if (data[i].input_type == "image") {
                returnStr = '<img data-original="" class="lazy" data-toggle="modal" data-target="#Viwepager" name="' + data[i].produce_field + '" style="width:100px;height:100px;">';
            } else if (data[i].input_type == "select") {
                returnStr = '<select class="form-control" field="'+data[i].produce_field+'" stepName="'+data[i].stepName+'" title="'+data[i].field_ch+'">';
                var dataText = data[i].text;
                returnStr += '<option value="">请选择</option>';
                for (var j = 0; j < dataText.length; j++) {
                    returnStr += '<option value="' + dataText[j].id + '" key="'+dataText[j].name+'">' + dataText[j].name + '</option>';
                }
                returnStr += '</select>';
            }
            dataGrid += "return '" + returnStr + "'}";
        }
        dataGrid += "}," } //在表格中插入一行 for (var i = 0; i < data.length; i++) {
        var inputstr="<input type='text' class='datasearch' οnchange='javascript:searchData()' style='width: 100%;' value=''/>";
        insertRow+='"'+data[i].produce_field+'":\"'+inputstr+'\",';
    }
    insertRow=insertRow.substring(0,insertRow.length-1)+"}";
    insertRow=eval("("+insertRow+")"); $('#table').datagrid('insertRow',{
        index: 0, row:insertRow
    }); 注：在表格中插入一行时，datagrid会自动给它总数量+1，需要修改源码easyUI.js中insertRow部分源码，把页码加1去掉就OKeasyUI的详细操作请参照官网：http://www.jeasyui.net/demo/380.html