Question

我对使用slickgrid很陌生，并且正在尝试使用它加载1200条记录。加载数据所需的时间约为6秒（这是相当大的）。如何减少服务器的加载时间？我已经在SO中看到了一些示例示例，但是没有一个示例对我有帮助。

一种方法是首先尽快加载前100条记录，然后将其余项加载到底部。我该如何实现？

这是我的代码：

<script>

var grid;
var columns = [
{ id: "Class", name: "Class", field: "Class", formatter: alignFormatter1},
{ id: "Number", name: "Number", field: "Number", formatter: alignFormatter2},
{ id: "Subject", name: "Subject", field: "Subject",formatter: alignFormatter3},
{ id: "Student", name: "Student", field: "Student", formatter: alignFormatter4},
{ id: "Date", name: "Date", field: "Date", formatter: alignFormatter5},
 ];

 function dayFormatter(row, cell, value, columnDef, dataContext) {
  //return value + ' days';
}

  function dateFormatter(row, cell, value, columnDef, dataContext) {
  //return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
}

function alignFormatter1(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 32px;'>"+dataContext.Class+"</span>";
}

function alignFormatter2(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 22px;'>"+dataContext.Number+"</span>";
}

function alignFormatter3(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 10px;'>"+dataContext.Subject+"</span>";
}

function alignFormatter4(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 32px;'>"+dataContext.Student+"</span>";
}

function alignFormatter5(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 95px;'>"+dataContext.Date+"</span>";
}

var options = {
enableCellNavigation: true,
enableColumnReorder: true,
multiColumnSort: true,
editable: true
};


$(function () {

var MS_PER_DAY = 24 * 60 * 60 * 1000;
var data = [];

var listdata = <?php echo json_encode($storeData)?>;
console.log(listdata);

for (var i = 0; i < listdata.length; i++) {

  data[i] = {
    Class:  listdata[i][0],
    Number: listdata[i]['1'],
    Subject: listdata[i]['2'],
    Student: listdata[i]['3'],
    Date: listdata[i]['4'],
  };

}



grid = new Slick.Grid("#myGrid", data, columns, options);

grid.setSelectionModel(new Slick.CellSelectionModel());
grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: false }) );
grid.registerPlugin(checkboxSelector); 

grid.onSort.subscribe(function (e, args) {
  var cols = args.sortCols;
  data.sort(function (dataRow1, dataRow2) {
    for (var i = 0, l = cols.length; i < l; i++) {
      var field = cols[i].sortCol.field;
      var sign = cols[i].sortAsc ? 1 : -1;
      var value1 = dataRow1[field], value2 = dataRow2[field];
      var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
      if (result != 0) {
        return result;
      }
    }
    return 0;
  });
  grid.invalidate();
  grid.render();
});
})
</script>

<script type="text/javascript">

var awidth,aheight,newheight;
awidth=$(window).width();
aheight=$(window).height();
newheight=aheight*0.9-150;
newheight = newheight | 0;
document.getElementById('myGrid').setAttribute("style","height:"+newheight+"px;");

</script>

注意：根据评论的建议，将php编码加起来

 <?php 

$sql        = "SELECT * FROM university_marks WHERE 1 ".$where. "ORDER BY Date desc";
//echo $sql;
$searchdetails = mysql_query( $sql );
$num_rows = mysql_num_rows($searchdetails);



    $storeData = array();
    $i= 0;
    while ($row = mysql_fetch_array($searchdetails)) {

        $storeData[$i][] = $row['ID'];
        $storeData[$i][] = $row['1'];
        $storeData[$i][] = $row['2'];
        $storeData[$i][] = $row['3'];
        $storeData[$i][] = $row['4'];
        $storeData[$i][] = $row['5'];

 $sql4    = "SELECT * FROM `faculty_address` WHERE id = $id and address!= '' ";
            $adddetails4 = mysql_query($sql4);
            $facultydetails4 = mysql_fetch_assoc($adddetails4);
            $num_rows5 = mysql_num_rows($adddetails4);
            if($num_rows5 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }

 $sql5        = "SELECT * FROM `students_attendence` WHERE id = '".$id."' AND ID_course='".$course."'";
            $adddetails5 = mysql_query($sql5);
            $csipdetails5 = mysql_fetch_assoc($adddetails5);
            $num_rows6 = mysql_num_rows($adddetails5);
            if($num_rows6 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }       

 $sql6        = "SELECT * FROM `students_marks` WHERE CA_ID = $id AND column1!= '' AND column2 !='' AND column3 !='' ";
            $adddetails31 = mysql_query($sql31);
            $studetails31 = mysql_fetch_assoc($adddetails31);
            $num_rows41 = mysql_num_rows($adddetails31);
            if($num_rows41 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }   

        $i++;
    }



?>

从评论中的建议中，我在php中执行sql查询时遇到了瓶颈问题。 SQL查询花费太多时间，导致延迟。我需要这些值来填充slickgrid中的列数据（$ sql4，$ sql5，$ sql6，）

Answer 1

只需在这里进行说明，这不是SlickGrid问题。

最初确定问题出在哪里的最佳方法是在Chrome中加载页面，打开开发者工具（ctrl-shift-I）并检查“网络”标签。这将向您显示页面加载内的页面源计时。

看来问题确实出在服务器端，如果您要检索1200条记录，然后对每个记录运行3个查询，那么您对数据库运行3600个单独的查询。难怪它需要6秒！正如@Eakethet所建议的那样，请花一些时间学习一些基本的SQL，并将所有这些重写为一个查询。您可能还需要添加一些数据库索引以加快相关数据的查找。完成所有这些操作后，您应该可以在500毫秒内获得良好的响应。

平滑的网格太慢，即使加载1000条记录也是如此

1 个答案: