Jquery实现列的拖动jquerygrid_jqgrid列拖动,jqgrid拖拽列资源-CSDN下载

共8个文件

js：3个

gif：2个

html：2个

jquery

grid移动

表头移动

2星需积分: 50 143 浏览量 2013-03-22 14:49:20 上传评论 1 收藏 78KB ZIP 举报

在网页开发中，jQuery Grid是一款强大的数据管理组件，它提供了丰富的功能，如数据分页、排序、搜索等。本文将详细讲解如何利用jQuery实现网格（Grid）中的列拖动功能，以及如何展示和压缩内容，以达到类似Excel的效果。我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI，因此需要确保页面中已经包含了这两个库的CSS和JS文件。例如： ```html <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="path/to/jquery.jqGrid.min.js"></script> ``` 接下来，我们需要创建一个HTML表格作为jQuery Grid的基础，并配置相应的JavaScript代码来初始化Grid： ```html <table id="jqGrid"></table> <div id="jqGridPager"></div> ``` ```javascript $("#jqGrid").jqGrid({ url: 'path/to/data.json', // 数据来源 datatype: 'json', colModel: [ // 列定义 {name: 'column1', index: 'column1', width: 80}, {name: 'column2', index: 'column2', width: 90}, // 更多列... ], // 其他配置项... }); ``` 为了实现列拖动功能，我们需要在初始化Grid时启用`sortableColumns`选项： ```javascript $("#jqGrid").jqGrid('navGrid', '#jqGridPager', { edit: false, add: false, del: false, search: false, refresh: false }, {}, {}, {}, {sortable: true}) // 这里的{}表示colModel设置 .jqGrid('gridDnD', {connectWith: "#jqGrid"}); // 启用列拖动 ``` 现在，用户可以自由地拖动表头来改变列的位置。但要注意，拖动列后，后台数据也需要对应调整，以保持数据和列显示的一致性。对于内容的自由展示，jQuery Grid支持多种自定义格式化和编辑器，可以通过`formatter`和`editoptions`进行配置。例如，如果某列是日期类型，我们可以设置自定义的日期格式化函数： ```javascript { name: 'dateColumn', index: 'dateColumn', width: 120, formatter: 'date', formatoptions: {newformat: 'm/d/Y'} } ``` 至于内容的压缩，jQuery Grid提供了一些内置的选项来控制行的展开和折叠。通过在`colModel`中定义一个展开列，我们可以实现类似树形结构的效果： ```javascript { name: 'expandColumn', index: 'expandColumn', width: 40, sortable: false, resizable: false, formatter: 'checkbox', formatoptions: {disabled : false} } ``` 然后在数据中添加子行标识，例如： ```json { "id": 1, "dataField": "value", "children": [ // 子行数据... ] } ``` 在初始化Grid时，使用`subGrid`选项启用子网格功能： ```javascript $("#jqGrid").jqGrid({ subGrid: true, subGridRowExpanded: function(subgridDivId, rowId) { // 在这里填充子Grid的内容 }, // 其他配置项... }); ``` 这样，用户就可以通过点击行来展开或折叠内容，实现了类似Excel的展示效果。总结起来，利用jQuery Grid可以轻松实现列拖动、内容展示和压缩的功能。通过对Grid的配置和扩展，我们可以构建出一款功能强大、用户体验良好的数据管理界面。在实际应用中，还可以结合其他jQuery插件和前端框架，进一步提升交互性和性能。

资源推荐

资源详情

资源评论

收起资源包目录

列拖动 jQueryGrid.zip （8个子文件）

列拖动_jQueryGrid

css

jQuery

Extend

grid.css 1KB

images

row-over.gif 823B

grid3-hrow.gif 836B

jQuery.Extend.js 7KB

grid.html 27KB

lib

jquery

jquery-1.4.2.min.js 70KB

jquery-1.4.2.js 160KB

1grid.html 2KB

<html> <head> <title>grid.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="css/jQuery/Extend/grid.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jQuery.Extend.js"></script> <script type="text/javascript"> $(function(){ $("#gvList").grid({}).bind("rowdblclick",function(event,row){ alert("双击行事件处理。"); }); }); </script> </head> <body> <table id="gvList"><thead><tr><th align="center" title="全选"><input type="checkbox" onclick="chkAll(this)" class="checkall"></th><th align="center" >序号</th><th align="center" >操作</th><th align="center" field="ScNo" title="点击标题行内销合同编号排序" ordertype="desc">内销合同编号</th><th align="center" field="CustID" title="点击标题行客户编号排序" ordertype="desc">客户编号</th><th align="center" field="BriefName" title="点击标题行客户简称排序" ordertype="desc">客户简称</th><th align="center" field="SMTyp" title="点击标题行销售方式排序" ordertype="desc">销售方式</th><th align="center" field="CreateDate" title="点击标题行签约日期排序" ordertype="desc">签约日期</th><th align="center" field="CustPONo" title="点击标题行客户订单编号排序" ordertype="desc">客户订单编号</th><th align="center" field="Memo" title="点击标题行备注排序" ordertype="desc">备注</th><th align="center" field="OwnerName" title="点击标题行拥有人名称排序" ordertype="desc">拥有人名称</th><th align="center" field="KeyInID" title="点击标题行录入人工号排序" ordertype="desc">录入人工号</th><th align="center" field="keyInName" title="点击标题行录入人名称排序" ordertype="desc">录入人名称</th><th align="center" field="KeyInDate" title="点击标题行录入日期排序" ordertype="desc">录入日期</th><th align="center" field="keyInTime" title="点击标题行录入时间排序" ordertype="desc">录入时间</th><th align="center" field="LastEditMan" title="点击标题行最后一次修改人排序" ordertype="desc">最后一次修改人</th><th align="center" field="LastEditDate" title="点击标题行最后一次修改日期排序" ordertype="desc">最后一次修改日期</th><th align="center" field="AuditState" title="点击标题行审核状态排序" ordertype="desc">审核状态</th><th align="center" field="IsDeleted" title="点击标题行删除状态排序" ordertype="desc">删除状态</th><th align="center" field="SaleID" title="点击标题行业务员排序" ordertype="desc">业务员</th><th align="center" field="SaleName" title="点击标题行业务员名字排序" ordertype="desc">业务员名字</th><th align="center" field="DeptID" title="点击标题行销售部门排序" ordertype="desc">销售部门</th><th align="center" field="DeptName" title="点击标题行销售部门名称排序" ordertype="desc">销售部门名称</th><th align="center" field="CUR" title="点击标题行结算币种排序" ordertype="desc">结算币种</th><th align="center" field="RMBEXR" title="点击标题行本币汇率排序" ordertype="desc">本币汇率</th><th align="center" field="USEXR" title="点击标题行美元汇率排序" ordertype="desc">美元汇率</th><th align="center" field="TotProdAmt" title="点击标题行商品总金额排序" ordertype="desc">商品总金额</th><th align="center" field="TotSCAmt" title="点击标题行合同总金额排序" ordertype="desc">合同总金额</th><th align="center" field="TotAddFee" title="点击标题行其他增加款项排序" ordertype="desc">其他增加款项</th><th align="center" field="TotDeductFee" title="点击标题行其他扣除款项排序" ordertype="desc">其他扣除款项</th><th align="center" field="TotVAT" title="点击标题行销项税总计排序" ordertype="desc">销项税总计</th><th align="center" field="PaymentMode" title="点击标题行付款方式排序" ordertype="desc">付款方式</th><th align="center" field="DeliveryAddr" title="点击标题行送货地址排序" ordertype="desc">送货地址</th><th align="center" field="FinishDate" title="点击标题行交货期排序" ordertype="desc">交货期</th><th align="center" field="ExpCompany" title="点击标题行出货公司排序" ordertype="desc">出货公司</th><th align="center" field="CompanyBank" title="点击标题行出货公司银行排序" ordertype="desc">出货公司银行</th><th align="center" field="CAccountNo" title="点击标题行出货公司银行账号排序" ordertype="desc">出货公司银行账号</th><th align="center" field="CBankNo" title="点击标题行出货公司银行编号排序" ordertype="desc">出货公司银行编号</th><th align="center" field="CBankAddr" title="点击标题行出货公司银行地址排序" ordertype="desc">出货公司银行地址</th><th align="center" field="CBankTel" title="点击标题行出货公司银行电话排序" ordertype="desc">出货公司银行电话</th><th align="center" field="BAddr" title="点击标题行客户地址排序" ordertype="desc">客户地址</th><th align="center" field="BTel" title="点击标题行客户电话排序" ordertype="desc">客户电话</th><th align="center" field="BContact" title="点击标题行客户联系人排序" ordertype="desc">客户联系人</th><th align="center" field="BMail" title="点击标题行客户联系人邮件排序" ordertype="desc">客户联系人邮件</th><th align="center" field="BName" title="点击标题行客户全名排序" ordertype="desc">客户全名</th><th align="center" field="BBank" title="点击标题行客户银行名排序" ordertype="desc">客户银行名</th><th align="center" field="BAccountNo" title="点击标题行客户银行账户排序" ordertype="desc">客户银行账户</th></tr></thead><tbody><tr><td align="center" ><input id="2301" type="checkbox" name="2301"/></td> <td>1</td> <td align="center" ><div class="imgdiv"><span class="img_uncollect" caption="NSC12030008" fid="2301" style="cursor:pointer;" title="收藏"></span> <span class="img_detail" onclick="showDetail(2301)" fid="2301" style="cursor: pointer; " title="打开"> </span></div></td><td align="center">NSC12030008</td><td align="center">FUMA0502</td><td align="center">湖北华腾</td><td align="center">赊销</td><td align="center">2012-3-29 0:00:00</td><td align="center"></td><td align="center"></td><td align="center">刘宝霞</td><td align="center">002402</td><td align="center">刘宝霞</td><td align="center">2012-3-29 0:00:00</td><td align="center"></td><td align="center">002402</td><td align="center">2012-6-7 16:25:17</td><td align="center">通过</td><td align="center">正常</td><td align="center">002402</td><td align="center">刘宝霞</td><td align="center">0024</td><td align="center">国内贸易业务一部</td><td align="center">RMB</td><td align="center">1.000000</td><td align="center">0.156500</td><td align="center">23504.280000</td><td align="center">27500.000000</td><td align="center">0.000000</td><td align="center">0.000000</td><td align="center">3995.720000</td><td align="center"></td><td align="center"></td><td align="center">2012-4-3 0:00:00</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="cent

评论收藏

内容反馈