jQuery LigerUI 使用教程表格篇(1)模板

jQueryLigerUI插件介...ligerDrag()使⽬标对象可以拖动。

参数 handler 拖动的作⽤区域，在这个区域才可以触发拖动。

可以是字符串(jQuery selector)，也可以是⼀个Dom jQuery对象 onStartDrag 开始拖动事件 onDrag 拖动事件 onStopDrag 结束拖动事件⽰例⼀：默认模式复制代码代码如下:<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><script src="lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script><script type="text/javascript">$(function (){$('#rr1,#rr3,#rr2').ligerDrag();});</script>复制代码代码如下:<div id="rr1" style="width:200px;height:200px;top:230px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> </div><div id="rr2" style="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;"> </div><div id="rr3" style="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;"> </div>⽰例⼆：只能在Panel头部进⾏拖动复制代码代码如下:<div id="rr1" style="width:200px;height:200px;top:130px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> <div class="header" style="height:30px; line-height:30px; background:#A1D1D1">标题</div></div>复制代码代码如下:$(function (){$('#rr1').ligerDrag({ handler: '.header' });});⽰例三：设置onStartDrag事件,使当前对象位于最顶层复制代码代码如下:function changeZIndex(obj){$(obj).css("z-index", 2).siblings("div").css("z-index", 1);}$(function (){$('#rr1,#rr3,#rr2').ligerDrag({onStartDrag: function (current){changeZIndex(current.target[0]);}});});⽰例四：使拖动时对象半透明复制代码代码如下:.l-dragging{filter:alpha(opacity=50);opacity:0.50; }复制代码代码如下:$('#rr1,#rr3,#rr2').ligerDrag({onStartDrag: function (current){current.target.addClass("l-dragging");},onStopDrag: function (current){current.target.removeClass("l-dragging");}});⽰例五：显⽰拖动时的信息复制代码代码如下:<div id="message"></div>复制代码代码如下:$('#rr1,#rr3,#rr2').ligerDrag({onDrag: function (current){$("#message").html("对象:" + current.target.attr("id") +"<BR>X移动:" + current.diffX +"<BR>Y移动:" + current.diffY);},onStopDrag: function (current){$("#message").html("");}});ligerResizable()使⽬标对象可以调整⼤⼩。

ligerui示例
LigerUI 是一个基于 jQuery 的 UI 框架，核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。

它致力于快速打造 Web 前端界面解决方案，可以应用于 .NET、JSP、PHP 等 web 服务器环境。

以下是一个简单的 LigerUI 示例：
```javascript
// 自定义单元格显示的数据
render: function(rowdata, rowindex, value, column) {
return + "--" + value + "--" + ;
}
```
在这个示例中，`render` 函数用于自定义单元格显示的数据。

它接收四个参数：`rowdata`（行数据）、`rowindex`（行索引）、`value`（当前的值，对应 `rowdata[]`）、`column`（列信息）。

函数返回一个字符串，该字符串由 ``、当前的值和列的宽度拼接而成。

当然，这只是 LigerUI 的一个小部分，如果你需要更具体的代码示例或者遇到使用上的问题，建议参考 LigerUI 的官方文档或社区论坛，也可以提供更多细节，以便我为你提供更准确的帮助。

一、电子信息技术 (2)（一）软件.................................................................................................... 错误！未定义书签。

（二）微电子技术 ...................................................................................... 错误！未定义书签。

（三）计算机及网络技术 ............................................................................ 错误！未定义书签。

（四）通信技术............................................................................................ 错误！未定义书签。

（五）广播电视技术 .................................................................................. 错误！未定义书签。

（六）新型电子元器件 ................................................................................ 错误！未定义书签。

（七）信息安全技术 .................................................................................... 错误！未定义书签。

（八）智能交通技术 .................................................................................... 错误！未定义书签。

jqgrid的setcell对于动态列的使用使用方法要使用jqGrid的setCell方法来操作动态列，首先要确保已经加载了jqGrid插件。

可以在HTML中引入jQuery和jqGrid的相关脚本文件，或直接从CDN上加载这些文件。

首先，创建一个HTML表格结构，可以使用一个空的div来承载jqGrid表格：```html<div id="grid"></div>```然后，在JavaScript中定义jqGrid的相关配置，包括列模型和数据源。

在这个例子中，我们假设有一个按钮，点击按钮时动态添加一列。

```javascript$(functio//数据源var myData ={ id: 1, name: 'John', age: 25 },{ id: 2, name: 'Amy', age: 28 },{ id: 3, name: 'Tom', age: 30 }];//列模型var myColModel ={ name: 'id', label: 'ID', width: 50, editable: false }, { name: 'name', label: 'Name', width: 100, editable: true }, { name: 'age', label: 'Age', width: 50, editable: true } ];// jqGrid配置var gridConfig =datatype: 'local',data: myData,colModel: myColModel,rowNum: 10,rowList: [10, 20, 30],pager: '#gridPager',gridview: true,viewrecords: true};// 初始化jqGrid$("#grid").jqGrid(gridConfig);//添加列按钮点击事件$("#addColumn").click(functio//添加一列到列模型var newCol = { name: 'email', label: 'Email', width: 150, editable: true };myColModel.push(newCol);// 更新jqGrid表格var grid = $("#grid");grid.jqGrid('setGridParam', { colModel:myColModel }).trigger('reloadGrid');});});```在上面的例子中，我们定义了一个myData数组作为数据源，一个myColModel数组作为列模型，以及一个gridConfig对象作为jqGrid的配置。

JQgrid表格的使⽤html部分：<div class="tab"><table id="datatable"></table><div id="pager2"></div></div>js部分：$(document).ready(function(){var tableWidth = $("#datatable").parent().innerWidth();$("#datatable").jqGrid({url:'${basePath}/boxController/list',datatype: "json",mtype: "POST",width: tableWidth,height: 350,autowidth:true,editable: true,shrinkToFit:true,colNames:['','柜号','箱编号','','箱类型','箱门名称','⼀箱多卡','固定箱门','物品状态','开关状态','箱门状态','操作'],colModel:[{name:"terminalid",index:"terminalid",align:'center',width:90,sortable:false,hidden:true},{name:"displayname",index:"displayname",align:'center',width:90,sortable:false},{name:"boxid",index:'boxid',align:'left',width:100,sortable:false},{name:"boxtypecode",index:"boxtypecode",align:'center',width:50,sortable:false,hidden:true},{name:"boxtypename",index:"boxtypename",align:'center',width:50,sortable:false,hidden:false},{name:"dispalyname",index:"dispalyname",frozen:true,align:'left',width:90,sortable:false},{name:"oneboxmorecard",index:"oneboxmorecard",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){ if(el==1){return '是';}else{return '否';}}},{name:"fixedbox",index:'fixedbox',align:'center',width:80,sortable:false,formatter:function(el,options,rowData){if(el==0){return '不限制';}else if(el==1){return '⼀箱⼀卡';}else{return '其他限制';}}},{name:"article",index:'article',align:'center',width:70,sortable:false,formatter:function(el,options,rowData){if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}}},{name:"open",index:'open',align:'center',width:100,sortable:false,formatter:function(el,options,rowData){if(el==0){return "开启";}else if(el==1){return "关闭";}else{return "故障";}}},{name:"status",index:"status",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}}},{name:"",index:'',align:'center',width:70,formatter:function(el,options,rowData){var d= '<input type="button" value="删除" onclick="delRepository(\''+rowData.terminalid+'\',\''+rowData.boxid+'\')"style="width:30px;float:right;margin-right:5px;"/>';var u= '<input type="button" value="修改" onclick="addMakeCard(\'修改类型\',\'修改\','+ options.rowId +')"style="width:30px;float:right;margin-right:10px;"/>';return u+d;}}],sortable: false,rowNum:10,rownumbers:false,multiselect: true,jsonReader: {repeatitems : false,id:"0"},pager: '#pager2',rowList:[10,15,20],toppager:true,sortname: 'rechargenumber',sortorder: 'desc',viewrecords: true,ondblClickRow:function(rowid){RowData= (this).jqGrid("getRowData", rowid);if(RowData.terminalid){list('查看',RowData.terminalid); //双击查看⽅法}},});$("#datatable").jqGrid("navGrid", "#pager2", {cloneToTop:true,// 克隆页⾯底层按钮到表顶端search:false,//隐藏查询按钮edit:false,//隐藏编辑按钮searchfunc:openDialog4Searching,searchtext:"查询",addfunc : openDialog4Adding, // (1) 点击添加按钮，则调⽤openDialog4Adding⽅法addtext:"新增",editfunc : openDialog4Updating, // (2) 点击添加按钮，则调⽤openDialog4Updating⽅法edittext:"修改",delfunc : openDialog4Deleting, // (3) 点击添加按钮，则调⽤openDialog4Deleting⽅法deltext:"删除",alerttext : "请选择需要操作的数据⾏!" // (4) 当未选中任何⾏⽽点击编辑、删除、查看按钮时，弹出的提⽰信息 });});var openDialog4Adding = function(title,okValue,row) {};var openDialog4Updating= function(title,okValue,row) {}var openDialog4Deleting= function(title,okValue,row) {var col=$("#datatable").jqGrid('getRowData',row);//获取单⾏数据var ids = $("#datatable").jqGrid("getGridParam", "selarrrow");//获取多⾏数据}var openDialog4Searching = function(title,okValue,row) {}。

jqGrid是一个强大的jQuery插件，用于创建分页、排序、过滤和编辑的表格。

以下是一些jqGrid的基本用法：1. 创建表格：```javascript$("#grid").jqGrid({url: 'data.json', // 数据源URLdatatype: 'json', // 数据类型colModel: [ // 列模型{ name: 'id', key: true },{ name: 'name' },{ name: 'email' }],pageNumber: 1, // 初始页面号pageSize: 10, // 初始页面大小ajaxGridOptions: { cache: false }, // 配置Ajax请求选项 serializeGridData: function (postData) {return JSON.stringify(postData);},loadComplete: function () {// 在数据加载完成后执行的回调函数},loadError: function (jqXHR, textStatus, errorThrown) { // 在数据加载出错时执行的回调函数}});```2. 添加行：```javascript$("#grid").jqGrid('addRowData', rowId, data);```3. 编辑行：```javascript$("#grid").jqGrid('editRow', rowId, true); // true表示保存更改```4. 删除行：```javascript$("#grid").jqGrid('delRowData', rowId);```5. 刷新表格：```javascript$("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');```6. 自定义排序：```javascript$("#grid").jqGrid('sortGrid', 'name', true); // 按名称排序，true表示升序排序```7. 自定义分页：```javascript$("#grid").jqGrid('setGridParam', { pageNumber: 2, pageSize: 10 }); // 设置页面号和页面大小```。

一、jqGrid学习jqGrid学习之------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。

按照官网文档：*/myproject/css/oui.jqgrid.csso/ui-lightness/+/images/+jquery-ui-1.7.2.custom.css*/myproject/js/o/i18n/+grid.locale-bg.js+list of all language files+….oChanges.txtojquery-1.3.2.min.jsojquery.jqGrid.min.js目录结构如上。

在页面中写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/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="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段style来指定页面上文字大小。

ligerui ligerlistbox 方法（实用版4篇）目录（篇1）1.介绍 LigerUI 和 LigerListBox2.LigerListBox 的方法3.使用 LigerListBox 的示例正文（篇1）LigerUI 是一个基于.NET 平台的 UI 组件库，它提供了许多现代化的 UI 组件，使得开发者可以轻松地创建具有丰富 UI 界面的应用程序。

在 LigerUI 中，LigerListBox 是一个非常实用的组件，它允许用户在列表中选择一个或多个项目。

LigerListBox 提供了许多方法，这些方法可以用来设置和操作列表框。

以下是一些常用的方法：- ItemClick：当用户单击列表框中的项目时，会触发此事件。

通过此事件，可以执行相应的操作，如弹出提示框或跳转到其他页面。

- ItemChecked：当用户选中或取消选中列表框中的项目时，会触发此事件。

通过此事件，可以实现自动完成、筛选等功能。

- AddItem：向列表框中添加一个新项目。

- RemoveItem：从列表框中移除一个项目。

- ClearItems：清空列表框中的所有项目。

- GetCheckedItems：获取列表框中选中的项目列表。

- SetCheckedItems：设置列表框中选中的项目列表。

- GetItemCount：获取列表框中的项目数量。

- SetItemCount：设置列表框中的项目数量。

- GetItem：获取列表框中指定索引的项目。

- SetItem：设置列表框中指定索引的项目。

- GetItemWidth：获取列表框中项目的宽度。

- SetItemWidth：设置列表框中项目的宽度。

- AutoSize：自动调整列表框中项目的宽度。

以下是一个使用 LigerListBox 的示例：```csharpusing System;using System.Collections.Generic;using Liger.UI;public class MainForm : Form{private LigerListBox listBox1;private Button button1;public MainForm(){listBox1 = new LigerListBox();listBox1.ItemClick += ListBox1_ItemClick; Controls.Add(listBox1);button1 = new Button();button1.Text = "确定";button1.Click += Button1_Click;Controls.Add(button1);listBox1.AddItem("项目 1");listBox1.AddItem("项目 2");listBox1.AddItem("项目 3");}private void ListBox1_ItemClick(object sender, EventArgs e){MessageBox.Show("项目" +listBox1.GetItemText(listBox1.GetSelectedIndex()) + "被选中", "提示", MessageBoxButtons.OK, rmation);}private void Button1_Click(object sender, EventArgs e) {List<string> checkedItems =listBox1.GetCheckedItems();if (checkedItems.Count > 0){MessageBox.Show("选中的项目：" + string.Join(",", checkedItems), "提示", MessageBoxButtons.OK,rmation);}else{MessageBox.Show("请至少选择一个项目", "提示", MessageBoxButtons.OK, rmation);}}}```在这个示例中，我们创建了一个 LigerListBox 和一个按钮。