2

我正在学习 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>
4

1 回答 1

5

是的，jqGrid 支持带有本地数据的sortableRows 。该演示只是答案中演示的副本，它使用 jqGrid 4.4.1 并且可以正常工作。

您发布的代码有两个小但重要的错误：

  • 您使用jQuery("#sortrows").jqGrid('sortableRows');，但您使用另一个id:创建了网格jQuery("#mytable")。所以你必须"#sortrows"改为"#mytable"
  • 您必须在块jQuery("#mytable").jqGrid('sortableRows'); 内移动线。您在创建网格之前$(document).ready(function(){});调用当前代码，因此它将不起作用。sortableRows
于 2012-09-26T17:29:00.740 回答