jqGrid可以支持使用本地数据拖放行吗?

时间:2012-09-26 17:09:41

标签: jqgrid

我正在学习jqGrid,希望最终将它连接到Redis数据库。作为第一步,我正在使用本地数据。这是我必须使用可排序的行(在网格中拖放行)。网格显示并且看起来很好,列甚至可以排序,但我不能选择一行并移动它 - 我错过了什么?是因为数据是本地的吗?

加载css和js文件没有问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  jQuery("#mytable").jqGrid({
      datatype:"clientSide",
      data:[ {"number": 1, "segment":"frontmatter", "name": "chap0"},
             {"number": 2, "segment":"mainmatter",  "name": "chap1"},
             {"number": 3, "segment":"backmatter",  "name": "chap2"},
           ],
      colNames:['Chapter Name', 'Chapter Number', 'Document Segment'],
      colModel:[
              {name:'name'},
              {name:'number', sorttype:'number'},
              {name:'segment'},
              ],
      autowidth:true,
      height:'200',
      sortname: 'number',
      viewrecords: true,
      caption: 'My first grid',
      altRows:true,
  });
});
jQuery("#sortrows").jqGrid('sortableRows');
</script>

</head>
<body>

<table id="mytable"></table>
</body>
</html>

1 个答案:

答案 0 :(得分:5)

是的,jqGrid支持sortableRows本地数据。 The demo,它只是the answer演示的副本,使用jqGrid 4.4.1并且可以正常工作。

您发布的代码有两个小而重要的错误:

  • 您使用jQuery("#sortrows").jqGrid('sortableRows');,但是您使用另一个idjQuery("#mytable")创建了网格。因此,您必须将"#sortrows"更改为"#mytable"
  • 您必须移动jQuery("#mytable").jqGrid('sortableRows');块内的<{1}} 。在创建网格之前,您当前的代码调用了$(document).ready(function(){}); ,因此无法正常工作。