easyUI 中datagrid使用总结

最新推荐文章于 2024-08-14 12:36:58 发布

疯子和傻子的爱情故事

最新推荐文章于 2024-08-14 12:36:58 发布

阅读量2.9k

点赞数 2

分类专栏： datagrid

本文链接：https://blog.csdn.net/qq_34223398/article/details/70792256

版权

datagrid 专栏收录该内容

1 篇文章 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去掉就OK
easyUI的详细操作请参照官网：http://www.jeasyui.net/demo/380.html