jQuery中表格的动态操作
jgrid中columnchooser用法
jgrid是一个流行的jQuery插件,用于创建可排序、可分页、可编辑和可筛选的表格。
在jgrid中,columnchooser是一个非常有用的功能,它允许用户动态选择表格中的列显示或隐藏。
在本文中,我们将详细介绍jgrid中columnchooser的用法。
1. 引入jgrid和columnchooser插件在使用columnchooser功能之前,首先需要引入jgrid和columnchooser插件。
可以通过CDN或者本地引入的方式将这两个插件引入到项目中。
2. 初始化jgrid表格在引入插件之后,需要初始化jgrid表格。
首先创建一个HTML表格,并为其指定一个id,然后在JavaScript中使用该id初始化jgrid表格。
3. 启用columnchooser功能要启用columnchooser功能,需要在jgrid的初始化配置中添加相应的参数。
可以通过设置colModel参数中的hidden属性为true或者false来控制列的显示与隐藏。
4. 添加columnchooser按钮在jgrid表格的工具栏中添加一个按钮,用于触发columnchooser功能。
可以使用navButtonAdd方法来添加按钮,并绑定相应的事件处理函数。
5. 使用columnchooser当jgrid表格初始化完成并且columnchooser功能启用后,用户可以点击工具栏中的columnchooser按钮,弹出一个对话框。
在这个对话框中,用户可以勾选或取消勾选各个列的复选框,从而实现动态选择表格中的列显示或隐藏的功能。
6. 保存用户选择用户可以根据自己的需求选择需要显示的列,并点击保存按钮,用户的选择将会被保存,下次打开表格时依然可以看到用户上次保存的列选择。
7. 注意事项在使用columnchooser功能时,需要注意一些细节。
需要确保表格中的列名称和id是唯一的,否则可能会出现选择列混乱的情况。
另外,还需要注意列的顺序,用户选择的列将会按照其在对话框中的顺序显示在表格中。
JQueryAjax动态生成Table表格
JQueryAjax动态⽣成Table表格前⾔: 本⽰例⼤概功能是前台通过JQuery的Ajax调⽤⼀般处理程序(Handler),获取表格需要显⽰的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的⾏,最好把⾏附加到表⾥。
⽬标: a 熟悉简单JQuery Ajax的使⽤ b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三⽅的dll) c 熟悉下handler的基本⽤法1 简单效果图2 前台代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DialogAjax.aspx.cs" Inherits="JQueryTest_DialogAjax" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title><link href="../JQueryUi/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" /><script src="../JQueryUi/jquery-1.4.2.min.js" type="text/javascript"></script><script src="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script><style type="text/css">#divTb{width:800px;border:1px solid #aaa;margin:0 auto;}.even{background:#CCCCCC;}.odd{background:#FFFFFF;}</style><script type="text/javascript">//获取发布模块类型function getModuleInfo() {$.ajax({type: "GET",dataType: "json",url: "../Handler/TestHandler.ashx?Method=GetModuleInfo",//data: { id: id, name: name },success: function(json) {var typeData = json.Module;$.each(typeData, function(i, n) {var tbBody = ""var trColor;if (i % 2 == 0) {trColor = "even";}else {trColor = "odd";}tbBody += "<tr class='" + trColor + "'><td>" + n.ModuleNum + "</td>" + "<td>" + n.ModuleName + "</td>" + "<td>" + n.ModuleDes + "</td></tr>";$("#myTb").append(tbBody);});},error: function(json) {alert("加载失败");}});}$(function() {getModuleInfo();});</script></head><body><form id="form1" runat="server"><div id="divTb"><table id="myTb" style=" width:100%"></table></div></form></body></html>3 Handler代码<%@ WebHandler Language="C#" Class="TestHandler" %>using System;using System.Web;using System.Collections.Generic;using System.Text;using DataDAL;using DataEnity;public class TestHandler : IHttpHandler {HttpRequest Request;HttpResponse Response;public void ProcessRequest (HttpContext context) {//不让浏览器缓存context.Response.Buffer = true;context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);context.Response.AddHeader("pragma", "no-cache");context.Response.AddHeader("cache-control", "");context.Response.CacheControl = "no-cache";context.Response.ContentType = "text/plain";Request = context.Request;Response = context.Response;string method = Request["Method"].ToString();System.Reflection.MethodInfo methodInfo = this.GetType().GetMethod(method);methodInfo.Invoke(this, null);}public void GetModuleInfo(){StringBuilder sb = new StringBuilder();string jsonData = string.Empty;List<Module> lsModule = ModuleDAL.GetModuleList();sb.Append("{\"Module\":[");for (int i = 0; i < lsModule.Count; i++){jsonData = "{\"ModuleNum\":" + "\"" + lsModule[i].ModuleNum + "\"" + ",\"ModuleName\":" + "\"" + lsModule[i].ModuleName + "\"" + ",\"ModuleDes\":" + "\"" + lsModule[i].ModuleDes + "\"" + "},"; sb.Append(jsonData);}if (lsModule.Count > 0)sb = sb.Remove(sb.Length - 1, 1);sb.Append("]}");Response.Write(sb);}public bool IsReusable{get {return false;}}}以上代码超简单吧,JQuery Ajax动态⽣成Table表格的内容就全部完成了,希望对⼤家有所帮助。
jQuery实现动态给table赋值的方法示例
jQuery实现动态给table赋值的⽅法⽰例本⽂实例讲述了jQuery实现动态给table赋值的⽅法。
分享给⼤家供⼤家参考,具体如下:html请忽视各种class,因为前端⽤的是layui<table class="layui-table" lay-skin="line" id="datas"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加⼊时间</th><th>签名</th></tr></thead><tbody><tr id="template"><td id="id"></td><td id="url"></td><td id="title"></td></tr></tbody></table>js代码<script>var data = [{"id": 1,"url": "","switch": 1,"order": 1,"pid": 0,"title": "Online Program knowledge share and study platform"},{"id": 2,"url": "","switch": 0,"order": 2,"pid": 2,"title": "这是测试的数数据这是测试的数数据"},{"id": 3,"url": "","switch": 0,"order": 3,"pid": 2,"title": "淘宝购物"},{"id": 4,"url": "1","switch": 1,"order": 4,"pid": 2,"title": "Online Program knowledge share and study platform2"},{"id": 5,"url": "1","switch": 0,"order": 5,"pid": 2,"title": "这是测试的数数据2"},{"id": 6,"url": "1","switch": 1,"order": 6,"pid": 0,"title": "淘宝购物2"}];$.each(data, function (i, n) {var row = $("#template").clone();row.find("#id").text(n.id);row.find("#url").text(n.url);row.find("#title").text(n.title);row.appendTo("#datas");//添加到模板的容器中});</script>效果更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
使用Jquery动态加入对象的集合属性,提交集合属性到表单
使⽤Jquery动态加⼊对象的集合属性,提交集合属性到表单1、设置模型,引⼊构造函数,初始化集合public class Person{public Person() //引⼊构造函数,初始化集合.如果未设置构造函数,集合会出现错误。
{Skills = new HashSet<string>();BirthDate = DateTime.Now.AddDays(-20);}public int PersonId { get; set; }[Required]public string FirstName { get; set; }[Required]public string LastName { get; set; }[Required]public DateTime BirthDate { get; set; }[Required][UIHint("BooleanButtonLabel")] //给指定字段指定显⽰模板。
⽤于html模板辅助⽅法,⽐如html.DisplayForModelpublic bool LikesMusic { get; set; }[Required][EmailAddress]public string EmailAddress { get; set; }public ICollection<string> Skills { get; set; }}2、设置控制器⽅法public ActionResult Create(){var person = new Person();return View(person);}[HttpPost]public ActionResult Create(Person person){if (ModelState.IsValid){_people.Add(person);return RedirectToAction("Index");}return View(person);}3、使⽤基架⽣成强类型视图@model BootstrapMVC30Days.Models.Person@using (Html.BeginForm()){@Html.AntiForgeryToken()<div class="form-horizontal"><div class="form-group">@belFor(model => model.LikesMusic, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10"><div class="checkbox">@Html.EditorFor(model => model.LikesMusic)@Html.ValidationMessageFor(model => model.LikesMusic, "", new { @class = "text-danger" })</div></div></div><div class="form-group">@belFor(model => model.Skills, htmlAttributes: new { @class ="control-label col-md-2"})<div class="col-md-10"><div class="input-group"><span class="input-group-btn"><button class="btn btn-default" id="add-skill" type="button"><span class="glyphicon glyphicon-plus"></span></button></span><input type="text" id="skill" class="form-control" placeholder="输⼊然后点击 + 加⼊" /></div></div></div><div id="skills-wrapper"></div><div class="form-group"><div class="col-md-offset-2 col-md-10"><ul id="skills-list" class="list-group"></ul></div></div><div class="form-group"><div class="col-md-offset-2 col-md-10"><input type="submit" value="Create" class="btn btn-default" /></div></div></div>4、在页⾯底部引⼊脚本。
jqueryDataTable实现前后台动态分页
jqueryDataTable实现前后台动态分页整理⽂档,搜刮出⼀个jquery DataTable实现前后台动态分页,稍微整理精简⼀下做下分享。
html代码:<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>测试页⾯</title><meta name="description" content=""><meta name="keywords" content=""><link href="https:///1.10.12/css/jquery.dataTables.min.css" rel="external nofollow" rel="stylesheet"><link href="///ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet"><link href="https:///1.10.12/css/dataTables.bootstrap4.min.css" rel="external nofollow" rel="stylesheet"></head><body><div style="width:50%;height:500px;margin:150px auto ;background-color: #f4cccc"><table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Cellphone</th><th>Position</th><th>Company</th><th>Salary</th></tr></thead><tbody></tbody></table></div><script type="text/javascript" src="///jquery-1.12.3.min.js"></script><script type="text/javascript" src=" ///1.10.12/js/jquery.dataTables.min.js"></script><script type="text/javascript">$(document).ready(function() {refreshDataTable();});var refreshDataTable=function() {var table = $('#example').DataTable({//"ajax":"data/tabledata.json",// "iDisplayLength": 3,"sPaginationType": "full_numbers","bPaginite": true,"bInfo": true,"bSort": true,"processing": false,"serverSide": true,"sAjaxSource": "customize/datatable.php",//这个是请求的地址"fnServerData": retrieveData});function retrieveData(url, aoData, fnCallback) {var data={"data":{"id":"123123","name":"2s",}};$.ajax({url: url,//这个就是请求地址对应sAjaxSourcedata : {"aoData" : JSON.stringify(aoData)},type: 'POST',dataType: 'json',async: false,success: function (result) {//var obj=JSON.parse(result);console.log(result);fnCallback(result);//把返回的数据传给这个⽅法就可以了,datatable会⾃动绑定数据的},error:function(XMLHttpRequest, textStatus, errorThrown) {alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);}});}};</script></body></html>PHP代码:<?phpheader('Content-type: text/json');$res = $_POST['aoData'];$sEcho = 0;$iDisplayStart = 0; // 起始索引$iDisplayLength = 0;//分页长度$jsonarray= json_decode($res) ;foreach($jsonarray as $value){if($value->name=="sEcho"){$sEcho=$value->value;}if($value->name=="iDisplayStart"){$iDisplayStart=$value->value;}if($value->name=="iDisplayLength"){$iDisplayLength=$value->value;}}$Array = Array();//此处⽣成50条数据,模仿数据库数据for ($i = 1; $i < 51; $i++) {$d = array($i,$i,$i,$i,$i);Array_push($Array, $d);}$json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据 $obj=json_encode($json_data);echo $obj;>效果图:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
jquery,表格插入第一行
竭诚为您提供优质文档/双击可除jquery,表格插入第一行篇一:基于jquery的实现简单的表格中增加或删除下一行代码如下:html代码如下:jquery代码如下:篇二:jquery可拖曳动态添加表格、动态排序@authorwen@time20xx-05-18这个是模型代码,领会思想就够√1、3行2列,可以拖动调整位置√2、第1列为名字,超长支持...(用css控制)√3、第2列固定宽度,第1列显示剩下的(用css控制)√4、第2列提供“上移”、“下移”操作√5、第2列提供“删除”操作√6、提供“添加行”操作,弹出div输入名字添加行√7、提供“修改行”操作,弹出div输入名字修改行文件:movetable.htmlsrc="/blog/edittable.js" >-->//启动加载$(function(){//varobj={a:1};//varar=[{b:1},{c:2}];//alert(0);//alert($.tojson(obj));//alert(ar[0].b);resert();//拖动排序$("#sortable").sortable({items:tr,//handle:tr,//handle:.portlet-header,//cursor:move,stop:function(){resert();}});$("#sortable").disableselection();})//up$("a.up").live("click",function(){varonthis=$(this).parent("td").parent("tr");vargetup=$(this).parent("td").parent("tr").prev();$(getup).before(onthis);resert();})//down$("a.down").live("click",function(){varonthis=$(this).parent("td").parent("tr");vargetup=$(this).parent("td").parent("tr").next();$(getup).after(onthis);resert();})//del$("a.del").live("click",function(){type="text/javas cript"varonthis=$(this).parent("td").parent("tr");onthis.remove();})//openadd$("input[name=addnewtr]").live("click",function(){ $("input[name=name1]").attr("value","");$("input[name=name2]").attr("value","");$(".box3").hide();$(".box2").show();});$("input[name=nameadd]").live("click",function(){ addnew();$(".box2").hide();});//openupdatefunctionopenupdate(a){//alert("进了了望"+a);varvalue1=$("#"+a+"_1").html();varvalue2=$("#"+a+"_2").html();$("input[name=name3]").attr("value",value1);$("input[name=name4]").attr("value",value2);$(".box2").hide();$("input[name=_update]").attr("value",a);$(".box3").show();};$("input[name=nameupdate]").live("click",function() {//alert("进入了1");varc=$("input[name=_update]")[0].value;//alert("进入了2");updatedate(c);//alert("进入了3");$(".box3").hide();});//~~~~~~~~~~~~~~~~~~//functionresert(){if($("#sortable").find("td.doing").size()==1) {//alert("1");$("#sortable").find("td.doing").parent().removeclas s("normal").removeclass("last").removeclass("first" ).addclass("only");}if($("#sortable").find("td.doing").size()==2) {//alert("2");$("td.doing:eq(0)").removeclass("only").removeclass ("normal").removeclass("last").addclass("first");$("td.doing:eq(1)").removeclass("only").removeclass ("normal").removeclass("first").addclass("last");}if($("#sortable").find("td.doing").size()>=3) {//alert("3");$("td.doing:gt(0)").removeclass("only").removeclass ("first").removeclass("last").addclass("normal");$("td.doing:first").removeclass("only").removeclass ("normal").removeclass("last").addclass("first");$("td.doing:last").removeclass("only").rem oveclass("normal").removeclass("first").addclass("l ast");}}var_j=5;//alert(_j);functionaddnew(){varname1=$("input[name=name1]")[0].value;varname2=$("input[name=name2]")[0].value;_j=++_j;//alert(_j);//添加新行varsortable=$(#sortable);varfirsttr=sortable.find(tbody>tr:first);varrow=$("");vartd=$("");vartd2=$("");vartd3=$("");td.text(name1);td2.text(name2);td3.append("删除修改");row.append(td);row.append(td2);row.append(td3);sortable.append(row);resert();}functionupdate(a){//传进来//alert(a);//alert("进来了");openupdate(a);}functionupdatedate(a){varname3=$("input[name=name3]")[0].value; varname4=$("input[name=name4]")[0].value;alert(name3);alert(name4);$("#"+a+"_1").text(name3);$("#"+a+"_1").text(name3);//alert(value1);//alert(value2);}#sortable2{border:1pxsolid#000;table-layout:fixed;}#sortable2th{text-align:left;font-size:14px;font-we ight:600;background:#Fc9;}#sortable2td{border-bottom:1pxsolid#ccc;}.link1{white-space:nowrap;text-overflow:ellipsi s;-o-text-overflow:ellipsis;overflow:hidden;}.link2 {white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}#pannellista.arrow{篇三:jquery动态添加和删除行"/tR/xhtml1/dtd/xhtml1-transitiona l.dtd">jquery表格操作添加行、删除行和动态移动src="/html/js/jquery-1.3.2.min.js">添加一行删除一行上移下移序号步骤名称步骤描述相关操作varcurrentstep=0;varmax_line_num=0;functionadd_line(){max_line_num=$("#contenttr:last-child").children("td").html();if(max_line_num==null){max_line_num=1;}else{max_line_num=parseint(max_line_num);max_line_num+=1;}$(#content).append(" +"onclick=lineclick(this);>"+max_line_num+"打开网页"+max_line_num+"打开登录网页"+max_line_num+"删除编辑");}functionremove_line(){$("#contenttr").each(function(){varseq=parseint($(this).children("td").html());if(s eq==currentstep)$(this).remove();if(seq>currentstep)$(this).children("td").each(function(i){if(i==0)$(this).html(seq-1);});});currentstep=0;}functionup _exchange_line(){if(currentstep==0){alert(请选择一项!);returnfalse;}if(currentstep=max_line_num){aler t(非法操作!);returnfalse;}varnextstep=parseint(currentstep) +1;//修改序号$(#line+nextstep+"td:first-child").html(currentstep );$(#line+currentstep+"td:first-child").html(nextst ep);//取得两行的内容varnextcontent=$(#line+nextstep).html();varcurrentc ontent=$(#line+currentstep).html();$(#line+nextstep ).html(currentcontent);//交换当前行与上一行内容$(#line+currentstep).html(nextcontent);$(#contenttr ).each(function(){$(this).css("background-color","# ffffff");});$(#line+nextstep).css("background-color ","yellow");currentstep=nextstep;}functionlineclick(line){$(#contenttr).each(function(){$(this).css("background-color","#ffffff");});varseq=$(line).children("td").html();$(line).css("b ackground-color","yellow");currentstep=seq;}。
JQueryEasyUIDataGrid动态合并(标题)单元)一
JQueryEasyUIDataGrid动态合并(标题)单元)⼀JS:/*** EasyUI DataGrid根据字段动态合并单元格* @param fldList 要合并table的id* @param fldList 要合并的列,⽤逗号分隔(例如:"name,department,office");*/function MergeCells(tableID, fldList) {var Arr = fldList.split(",");var dg = $('#' + tableID);var fldName;var RowCount = dg.datagrid("getRows").length;var span;var PerValue = "";var CurValue = "";var length = Arr.length - 1;for (i = length; i >= 0; i--) {fldName = Arr[i];PerValue = "";span = 1;for (row = 0; row <= RowCount; row++) {if (row == RowCount) {CurValue = "";}else {CurValue = dg.datagrid("getRows")[row][fldName];}if (PerValue == CurValue) {span += 1;}else {var index = row - span;dg.datagrid('mergeCells', {index: index,field: fldName,rowspan: span,colspan: null});span = 1;PerValue = CurValue;}}}}HTML:<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true"data-options="autoRowHeight:false,pageSize:50,pageList: [10, 20, 30, 40, 50,100,5000],idField:'zhbid',sortName:'zhbbh', queryParams: { 'action': 'query'},onLoadSuccess:function(data){ MergeCells('DataGrid','mkmch,zhbmch');},onDblClickRow: onClickRow"rownumbers="true" singleSelect="true" url="../Source/Data/zhbdata.ashx?mxbs=MON"><thead><tr><th field="zhbid" hidden="true" sortable="true" width="100" rowspan="2">指标ID</th><th field="zhbbs" hidden="true" sortable="true" width="100" rowspan="2">指标ID</th><th field="mxid" hidden="true" sortable="true" width="100" rowspan="2">模块ID</th><th field="dwid" hidden="true" sortable="true" width="100" rowspan="2">单位ID</th><th field="rq" hidden="true" sortable="true" width="100" rowspan="2">⽇期</th><th field="mkmch" sortable="true" width="80" data-options="headalign:'center',align:'center'" rowspan="2">板块</th><th field="zhbmch" sortable="true" width="150" data-options="headalign:'center'" rowspan="2">指标名称</th><th field="dw" sortable="true" width="80" data-options="headalign:'center'" rowspan="2">指标单位</th><th field="shn_ljzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">上⼀年度<br />同期累计<br />完成值</th><th field="bn_jh" sortable="true" width="80" data-options="headalign:'center'" rowspan="2">已下达年<br />计划</th><th colspan="4">指标完成情况</th><th field="mxmch" sortable="true" width="250" data-options="headalign:'center'" rowspan="2">基础数据</th><th field="mxzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">基础数据<br />(本期)</th><th field="beizhu" sortable="true" width="350" data-options="headalign:'center'" rowspan="2">备注</th></tr><tr><th field="bq_zh" sortable="true" width="90" data-options="headalign:'center'">本期完成值</th><th field="bn_ljzh" sortable="true" width="90" data-options="headalign:'center'">累计完成值</th><th field="bn_ljtb" sortable="true" width="80" data-options="headalign:'center'">同⽐</th><th field="bn_tb" sortable="true" width="80" data-options="headalign:'center'">与计划⽐</th></tr></thead></table>。
Jquery Jqgrid使用手册
一、电子信息技术 (2)(一)软件.................................................................................................... 错误!未定义书签。
(二)微电子技术 ...................................................................................... 错误!未定义书签。
(三)计算机及网络技术 ............................................................................ 错误!未定义书签。
(四)通信技术............................................................................................ 错误!未定义书签。
(五)广播电视技术 .................................................................................. 错误!未定义书签。
(六)新型电子元器件 ................................................................................ 错误!未定义书签。
(七)信息安全技术 .................................................................................... 错误!未定义书签。
(八)智能交通技术 .................................................................................... 错误!未定义书签。
jqgrid的setcell对于动态列的使用使用方法
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的配置。
jQueryGrid入门指南(2)
jQueryGrid⼊门指南(2)上周以为已经把jqgrid 表格这部分已经搞得差不多了,没想到在实际⽤的时候,出现了不少问题,重新把这块知识整理⼀下。
问题⼀:设置表格的⾃动刷新问题的原因: 使⽤表格⾃带的增删改查的功能,编辑完数据后表中数据会刷新。
但是⼿写⽅法修改数据,例如模态框,修改完成后并不会在表中进⾏数据的刷新。
解决的办法: 在请求发送之后,模态框关闭之前使⽤jqgrid的reloadGrid。
$("#jqGrid").trigger("reloadGrid");问题⼆:表中⽇期的显⽰格式问题的原因: 当数据库中的字段是date类型时,直接将数据加载到表格中,显⽰得是⼀串数字,为时间的毫秒值。
解决的办法: 给字段后追加时间转换的⽅法{ label: '⽇期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert }, 编写dateConvert⽅法function dateConvert(cellvalue){var times= new Date(cellvalue) ;date = times.toLocaleString();return date;}问题三:设置表中每⾏交替显⽰样式不同问题的原因: 在设置表格的属性altRows:true 后,表格的样式并没有发⽣改变解决的办法: 在添加altRows:true属性之后,还需要设置altclass来规定需要交替显⽰得样式altRows: true, //设置⾏交替样式altclass: 'differ', //⼿动写的交替的样式.differ{background-color: #DDDDDC;}问题四:表格完成响应式问题的原因: 这个问题本来已经在上⼀篇博客中得到了解决,可是⼜发现了⼀个新的问题,就是当表格的列数⽐较多时,表格中不会出现滚动条,⼿动调整窗⼝⼤⼩时才会出现。
jquery插件treegrid树状表格的使用方法详解(.Net平台)
jquery插件treegrid树状表格的使⽤⽅法详解(.Net平台)⼀、使⽤treegrid,需要以下⽀持jquery.min.js+jquery.treegrid.min.js⼆、后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页⾯上输出满⾜treegrid格式要求的html前台:@using Model@{Layout = null;UserInfo userInfo = null;if (ViewData["LoginUser"] != null){userInfo = ViewData["LoginUser"] as UserInfo;}else{Response.Redirect("/Login/Index");}}<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><title>⽤户列表</title><link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /><link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /><link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /><link href="~/Content/Scripts/treegrid/css/jquery.treegrid.css" rel="stylesheet" /><style>.page-container {padding: 10px;}.operation {background: #EFEEF0;padding: 3px;}.search {background: #EFEEF0;padding: 5px;margin-top: 5px;}.table {margin-top: 10px;}.dataTables_info {margin-left: 5px;}#table1_info {padding: 0;}#table1_length {margin-left: 15px;}</style><!--引⼊脚本解决兼容性(hack技术,必须放⼊head中)--><!--[if lt IE 9]><script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script><script src="~/Content/Scripts/html5_css3/respond.min.js"></script><script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script><![endif]--></head><body><div class="page-container"><div class="operation">@Html.Partial("CRUDBtn", userInfo)</div><div class="table"><table id="table1" class="table table-border table-bordered table-bg table-hover"><thead><tr class="text-c"><th><input type="checkbox" name="" value=""></th><th>菜单名</th><th>请求路径</th><th>描述</th><th>添加时间</th><th>修改时间</th></tr></thead></table></div></div></body></html><script src="~/Content/Scripts/jquery-2.0.3.min.js"></script><script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script><script src="~/Content/Scripts/layer/2.1/layer.js"></script><script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script><script src="~/Content/Scripts/h-ui/js/H-ui.js"></script><script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script><script src="~/Content/Scripts/treegrid/js/jquery.treegrid.min.js"></script><script type="text/javascript">var table1 = null;$(function () {table1 = initializeTable();clickDeal();});/*点击处理*/function clickDeal() {var addBtn = $("#add");var deleteBtn = $("#delete");var editBtn = $("#edit");var viewBtn = $("#view");$("#search").click(function () {table1.ajax.reload();return false;});if (addBtn != null) {addBtn.click(function () {var title = $(this).text().substring(1).trim();var url = $(this).attr("url");layer_show(title, url, 600, 360);});}if (deleteBtn != null) {deleteBtn.click(function () {var idArr = [];var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length == 0) {layer.msg("请⾄少选择⼀个选项", { icon: 2, time: 2000 });}else {layer.confirm('确认要删除吗?', function (index) {var loadIndex = layer.load();$.ajax({url: url,type: "post",data: { "idArrStr": idArr.toString() },dataType: "json",success: function (data) {if (data.Pass) {layer.close(loadIndex);layer.msg(data.Msg, { icon: 1, time: 2000 });table1.ajax.reload(null, false);} else {layer.msg(data.Msg, { icon: 1, time: 2000 });}},error: function (msg) {layer.msg(msg.status);}});});}});}if (editBtn != null) {editBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}if (viewBtn != null) {viewBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}}/*初始化table*/function initializeTable() {var table = $("#table1").DataTable({/****************************************表格数据加载****************************************************/"serverSide": true,"ajax": {//ajax请求数据源"url": "/Power/Manager/Search","type": "post","data": function (data) {//添加额外的数据给服务器}},"columns": [//列绑定{ "defaultContent": "" },{ "data": "PowerName" },{ "data": "Url" },{ "data": "Description" },{ "data": "AddTime" },{ "data": "ModifyTime" }],"columnDefs": [//列定义{"targets": [0],"data": "PowerId","render": function (data, type, full) {//全部列值可以通过full.列名获取,⼀般单个列值⽤data PS:这⾥的render是有多少列就执⾏多少次⽅法。
jqgrid谈谈给表格设置列头事件、行事件、内容事件
jqgrid谈谈给表格设置列头事件、⾏事件、内容事件往往我们需要给显⽰的jqgrid表格赋予事件功能,⽐如:列头事件、⾏事件、内容事件。
需要的效果可能如下:如你所见,以上的超链接和按钮均是绑定的事件。
那分别如何实现这些事件的绑定呢?⼀、⾏事件⾏事件:在每个⾏头部或尾部的事件。
⼀般⽤于放置‘编辑’或“删除”按钮在jqgrid中,⾏事件所在的列实际上也是⼀个绑定列,故可以把⾏事件的列看成和普通列字段⼀样来对待。
可以通过设置 formatter 来动态实现编辑区事件标签。
由于⾏事件可能需要传递当前⾏的其他列的值作为参数,可以通过 rowObject 来获取指定列的值。
如:或 rowObject["Name"]请参考以下代码块://初始化操作区所在列var curRowF = {//label: "操作区",//标签内容label: '<label title="操作区" style="width:98%;text-align:center">操作区</label>',name: "actions",//字段编码align: "center",//横向位置sortable: false,//是否排序hidden: false,//是否隐藏frozen: true,//是否冻结// width: 80,//列宽度width: outEventArr.length * 30,//列宽度formatter: function (cellvalue, options, rowObject) { return cellvalue; }};var formatRowFun = function (cellvalue, options, rowObject) {var lbl = "";if (outEventArr != null && outEventArr.length > 0) {for (var j = 0; j < outEventArr.length; j++) {var ev = outEventArr[j];if (ev.EventType == "1")//为⾏事件时{lbl += OutEventForLabel(ev, null, rowObject, cellvalue) + " ";}}}return lbl;};View Code代码说明:OutEventForLabel ⽅法为我⾃⼰编写事件拼凑⽅法,可以根据⾃⼰项⽬实际需求去实现⼆、列事件列事件:附加在列名上的事件直接在 colModel 对应列的 label 上去配置事件colModel: [{ label: '<a href="HtmlPage1.html" title="测试标题">OrderID</a>', name: 'OrderID', key: true, width: 75 }]View Code三、内容事件内容事件:给jqgrid内容区域配置事件内容事件配置需要依附在具体的某个列上,需要在 formatter 中配置⽣成事件//拼凑内容事件的formatter函数var formatFun = function (cellvalue, options, rowObject) {//获取内容事件标签//为当前列的name名称var evlb = OutEventForLabel(eval("event_" + ), null, rowObject, cellvalue);if (evlb != null && evlb != "") {return evlb;}return cellvalue;};View Code由于内容事件的拼凑是动态的,需要事先定好是给那个列所在值拼凑事件,故我的写法,⼀个动态变量名:OutEventForLabel(eval("event_" + ), null, rowObject, cellvalue);结尾处给⼤家分享⼀个细节:对于每个列字段的 formatter ⽅法,该部分函数实际上是在jqgrid的表格框架内容加载完毕后才执⾏的,也只有这样我们才能通过rowObject 获取各⾏的其他列值。
jquery formbuilder用法
jquery formbuilder用法一、前言jQuery Formbuilder是一款功能强大的表单生成器插件,它能够帮助开发者快速构建各种类型的表单,支持多种表单控件和验证方式。
本文将详细介绍jQuery Formbuilder的用法,包括其基本概念、使用方法、常见用法和注意事项。
二、基本概念jQuery Formbuilder是一个基于jQuery的插件,它提供了一系列表单构建工具和API,帮助开发者创建、管理和提交表单。
Formbuilder允许开发者自定义表单的外观和功能,支持各种表单控件和验证方式,如文本框、下拉框、单选框、复选框、文件上传等。
此外,Formbuilder还提供了丰富的表单数据处理和发送功能,方便开发者进行数据收集和发送。
三、使用方法1. 引入插件:在使用jQuery Formbuilder之前,需要将其引入到网页中。
可以通过下载插件文件或使用CDN链接来引入。
2. 创建表单:使用Formbuilder的API创建表单。
可以通过调用相关方法来添加各种表单控件和验证方式。
3. 添加控件:可以使用Formbuilder提供的各种控件类,如text、select、checkbox、radio等,来添加各种类型的表单控件。
还可以使用自定义控件类来创建自定义的表单控件。
4. 添加验证:可以使用Formbuilder提供的验证方法,如required、minlength、email等,来添加各种类型的表单验证。
还可以使用自定义验证方法来创建自定义的表单验证。
5. 处理表单数据:可以使用Formbuilder提供的数据处理方法,如submitForm、validateForm等,来提交表单数据和处理验证结果。
四、常见用法1. 动态生成表单:可以使用Formbuilder的API动态生成表单,根据不同的条件和数据生成不同的表单控件和验证方式。
2. 表单分组:可以将多个表单控件分组,以便于管理和提交数据。
jQGrid动态填充select下拉框的选项值(动态填充)
jQGrid动态填充select下拉框的选项值(动态填充)本⽂给⼤家分享⼀段代码关于技巧jqgrid动态填充select 下拉框的选项值,⾮常不多说了,直接给⼤家贴代码了,具体代码如下所⽰:function gettypes(){//动态⽣成select内容var str="";$.ajax({type:"post",async:false,url:"checkpersontype",success:function(data){if (data != null) {var jsonobj=eval(data);var length=jsonobj.length;for(var i=0;i<length;i++){if(i!=length-1){str+=jsonobj[i].personType+":"+jsonobj[i].personType+";";}else{str+=jsonobj[i].personType+":"+jsonobj[i].personType;// 这⾥是option⾥⾯的 value:label}}//$.each(jsonobj, function(i){//str+="personType:"+jsonobj[i].personType+";"//$("<option value='" + jsonobj[i].personType + "'>" + jsonobj[i].personType+ "</option>").appendTo(typeselect);//});}alert(str);}});return str;}注意:要return以及async:false否则没有效果在colModel:中设置edittype:'select',editoptions:{value:gettypes()}就ok了。
jqgrid的setcell 使用方法
jqGrid 的 setCell 使用方法1. 什么是 jqGrid?jqGrid 是一个基于 jQuery 的表格插件,它提供了丰富的功能和灵活的配置选项,可以用于展示和编辑数据表格。
jqGrid 是一个开源项目,由多个开发者共同维护和改进,目前已经成为了非常受欢迎的前端表格插件之一。
2. setCell 方法的作用setCell 方法是 jqGrid 提供的一个用于修改单元格内容的方法。
通过调用setCell 方法,我们可以动态地改变表格中指定单元格的值,并且可以选择是否更新单元格的样式。
3. setCell 方法的语法setCell 方法的语法如下所示:$("#grid_id").jqGrid('setCell', rowId, colName, newValue, cssClass, propertie s);•grid_id:表示 jqGrid 的表格 ID,通过该 ID 可以获取到对应的表格对象。
•rowId:表示需要修改的单元格所在行的 ID,可以是一个字符串或数字。
•colName:表示需要修改的单元格所在列的名称,必须是一个字符串。
•newValue:表示需要设置的新值,可以是一个字符串或其他合法的JavaScript 值。
•cssClass:表示需要设置的新样式,可以是一个字符串或数组。
•properties:表示需要设置的其他属性,可以是一个对象。
4. setCell 方法的使用示例下面是一个使用 setCell 方法的简单示例:$("#grid").jqGrid('setCell', 'row_id', 'col_name', 'new_value', 'new_class', {attr1: value1, attr2: value2});在这个示例中,我们通过调用 setCell 方法,将表格中row_id行的col_name列的值修改为new_value,并且将单元格的样式修改为new_class,同时还可以设置其他属性。
jqgrid的setcell对于动态列的使用 使用方法
jqgrid的setcell对于动态列的使用使用方法摘要:1.引言2.jqGrid 简介3.setCell 方法的作用4.动态列的定义与用途5.setCell 方法在动态列中的使用6.示例代码及解析7.总结正文:1.引言jqGrid 是一款非常强大的表格控件,提供了丰富的API 供开发者使用。
在实际应用中,我们常常需要根据不同的业务需求,对表格的样式和内容进行动态调整。
setCell 方法就是jqGrid 提供的一个用于动态设置单元格内容的API。
本文将重点介绍setCell 方法在动态列中的使用方法。
2.jqGrid 简介jqGrid 是一款基于jQuery 的表格控件,提供了表格的增删改查等功能,以及丰富的配置选项,使得开发者可以轻松地实现复杂的表格需求。
3.setCell 方法的作用setCell 方法用于设置表格中指定单元格的内容。
它有四个参数:row(行号)、cell(列号)、value(单元格内容)和trigger(触发器)。
当表格数据发生变化时,可以通过setCell 方法动态更新单元格内容。
4.动态列的定义与用途动态列是指在表格中动态添加或删除的列。
在jqGrid 中,可以通过设置colModel 选项实现动态列的添加与删除。
动态列的用途主要有两个:一是根据用户需求动态调整表格结构,二是根据数据变化自动调整列宽。
5.setCell 方法在动态列中的使用在动态列的场景下,setCell 方法的参数需要稍作调整。
首先,行号和列号参数需要根据动态列的实际情况进行设置。
其次,由于动态列可能会在表格加载时还未生成,因此触发器参数需要设置为true,以确保在表格加载完成后自动更新单元格内容。
jqGrid实现虚拟滚动和合并单元格
jqGrid实现虚拟滚动和合并单元格如图:关键点:1.scroll: 1, //虚拟滚动,解决⼤数据⼀次性加载慢的问题,同时解决分页2.function merge(names)//⾃定义函数$(function () {//查询$("#querybtn").click(function () {var prm = {};$("#querytb td [name]").each(function (ind, o) {prm[] = $(o).val();});if ($("#jqgrid").data("jqgrid")) {//已经初始化$("#jqgrid").jqGrid("setGridParam", {"postData": prm }).trigger("reloadGrid");} else {$("#jqgrid").jqGrid({url: 'SCHandler.ashx?action=SCResult2',caption: "点检结果",datatype: "json",pager: "#pager", postData: prm,height: ($(window).height() - 210),colNames: ["rid", "系统", "设备名称", "部位", "项⽬", "点检内容", "点检时间", "点检结果", "结果说明", "处理⽅式", "处理结果", "点检⼈", "点检单位"], colModel: [{ name: "rid", hidden: true, key: true },{ index: "系统", name: "系统", width: 80 },{ index: "设备名称", name: "设备名称", width: 80 },{ index: "部位", name: "部位", width: 80 },{ index: "项⽬", name: "项⽬", width: 80 },{ index: "点检内容", name: "点检内容", width: 80 },{ index: "点检时间", name: "点检时间", width: 100 },{ index: "点检结果", name: "点检结果", width: 60 },{ index: "结果说明", name: "结果说明" },{ index: "处理⽅式", name: "处理⽅式" },{ index: "处理结果", name: "处理结果" },{ index: "点检⼈", name: "点检⼈" },{ index: "点检单位", name: "点检单位", hidden: true }],rowNum: 50,gridComplete: function () { merge(["系统", "设备名称", "部位", "项⽬","点检内容"]); },cmTemplate: { editable: false, sortable: false, width: 80 }, scroll: 1,viewrecords: true, gridview: true}).bindKeys().data("jqgrid", true);}});});function merge(names) {var trs = $("#jqgrid>tbody>tr:gt(0)");$.each(names, function (ind, name) {var bg = trs.eq(0).children("[aria-describedby='jqgrid_" + name + "']"),index = bg.index(),rowsp = 1;trs.slice(1).each(function (ind2, tr) {var me = $(tr).children("td").eq(index);if (bg.text() === me.text()) {rowsp++;me.hide();} else {bg.attr("rowspan", rowsp);bg = me;rowsp = 1;}bg.attr("rowspan", rowsp);});});}。
JQueryDIV动态隐藏和显示的方法
JQueryDIV动态隐藏和显⽰的⽅法1. 如果在载⼊是隐藏:<head><script language="javascript">function HideWeekMonth(){$("#tt1").hide();$("#tt2").hide();}</script></head><body onLoad="HideWeekMonth()"></body>2. 动态隐藏和显⽰:<td><!-- 能⽤<input id="btnShow" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" /><input id="btnHide" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" />--><!-- 直接使⽤按钮的id没有问题<input id="tt" type="text" name="title" maxlength="50" size="50"></td> --><input id="btnOne" type="radio" name="frequence" value="1" checked='checked'><?php echo $ini_array['time.one']?> <input id="btnDay" type="radio" name="frequence" value="2"><?php echo $ini_array['time.day']?> <input id="btnWeek" type="radio" name="frequence" value="3"><?php echo $ini_array['time.week']?> <input id="btnMonth" type="radio" name="frequence" value="4"><?php echo $ini_array['time.month']?> <br><!-- 能⽤<div id="tt1"><input type="text" name="title" maxlength="50" size="50" value="tt1"></div><div id="tt2"><input type="text" name="title" maxlength="50" size="50" value="tt2"></div>--><div id="tt1"><br>1 <input type="checkbox" value="1" name="w1"> 2 <input type="checkbox" value="1" name="w2"> </div><div id="tt2">03 <input type="checkbox" name="m3"> 04 <input type="checkbox" name="m4"> </div></td><!-- 绑定事件似乎要写在被绑定对象的后⾯ --><script type="text/javascript" >$("#btnOne").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); });$("#btnDay").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); });$("#btnWeek").bind("click", function(event) { $("#tt1").show(); $("#tt2").hide(); });$("#btnMonth").bind("click", function(event) { $("#tt1").hide(); $("#tt2").show(); });</script>以上代码之前,可能还要加上这句话:<script type="text/javascript" src="../../scripts/jquery.min.js"></script>使⽤jquery真的很⽅便,⽐如要控制div的显⽰与隐藏,⼀句话就搞定了,请看下⾯使⽤说明。
jQuery实现列表自动滚动循环滚动显示新闻通知
jQuery实现列表⾃动滚动循环滚动显⽰新闻通知需求页⾯中⼀个⼩区域循环滚动展⽰通知(公告、新闻、活动、图⽚等),并且⿏标hover时停⽌滚动并提⽰,⿏标离开后,继续滚动。
效果图代码实现html<div id="news"><ul class="notices_box"><li class="notice"><a href="" target="_blank" title="1">1</a></li><li class="notice"><a href="" target="_blank" title="2">2</a></li><li class="notice"><a href="" target="_blank" title="3">3</a></li></ul></div>css#news {height: 340px;overflow: hidden;}.notices_box {margin-left: 20px;.notice {margin-bottom: 8px;list-style: disc;font-size: 16px;color: #e6a5ab;a {color: #000;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;line-height: 1.2;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;&:hover {color: #c90808;}}}}JS$(function () {// 公告滚动var $this = $("#news");var scrollTimer;$this.hover(function () {clearInterval(scrollTimer);}, function () {scrollTimer = setInterval(function () {scrollNews($this);}, 2000);}).trigger("mouseleave");});// 公告滚动function scrollNews(obj) {var $self = obj.find("ul");var lineHeight = $self.find("li:first").height();$self.animate({"marginTop": -lineHeight + 'px'}, 600, function () {$self.css({marginTop: 0}).find("li:first").appendTo($self);})}总结主要是对hover、setInterval、clearInterval、animate这些⽅法以及marginTop属性(marginLeft、top、left等等)的理解和运⽤,需要注意的是,如果不加.trigger("mouseleave"),在⽹页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。
bootstraptable方法
bootstraptable方法Bootstrap Table 是一款基于 Twitter Bootstrap 样式 jQuery 插件,专门用于动态数据展示的表格,它使用简单,同时兼容各种浏览器,并支持自定义分页、排序、搜索等交互式操作。
下面我们将介绍 Bootstrap Table 的常用方法:1. init 初始化通过初始化操作可以为表格设置各种参数,常用的参数包括:url、method、queryParams、columns、idField、sortName等。
其中,url指定表格数据的来源;method指定请求方式(GET或POST);queryParams指定查询参数;columns定义表格的列;idField指定唯一标识列的名称;sortName指定排序列的名称。
示例代码如下:```javascript$('#table').bootstrapTable({url: 'data.php',method: 'post',queryParams: function(params){return {limit: params.limit,offset: params.offset};},columns: [{field: 'id',title: 'ID'},{field: 'name',title: '姓名'},{field: 'age',title: '年龄'}],idField: 'id',sortName: 'id'});```2. load 加载数据通过 load 方法可以在初始化之后手动调用请求数据,示例代码如下:```javascript$('#table').bootstrapTable('load', {total: 50,rows: [{id: 1,name: '张三',age: 25},{id: 2,name: '李四',age: 28}]});```3. refresh 重新加载数据通过 refresh 方法可以重新加载数据,示例代码如下:```javascript$('#table').bootstrapTable('refresh');```4. remove 删除数据通过 remove 方法可以删除选中的行,示例代码如下:```javascript$('#table').bootstrapTable('remove', {field: 'id',values: [1, 2]});```5. getAllSelections 获取选中的行通过 getAllSelections 方法可以获取所有选中的行,示例代码如下:```javascriptvar selections =$('#table').bootstrapTable('getAllSelections');```6. getSelections 获取选中的行通过 getSelections 方法可以获取当前页选中的行,示例代码如下:```javascriptvar selections = $('#table').bootstrapTable('getSelections'); ```7. search 搜索数据通过 search 方法可以搜索数据,示例代码如下:```javascript$('#table').bootstrapTable('search', {search: '张三'});```8. scrollTo 滚动到指定行通过 scrollTo 方法可以滚动到指定行,示例代码如下:```javascript$('#table').bootstrapTable('scrollTo', 5);```9. ScrollToBottom 滚动到最后一行通过 scrollToBottom 方法可以滚动到最后一行,示例代码如下:```javascript$('#table').bootstrapTable('scrollToBottom');```总之,Bootstrap Table 作为一款强大的 jQuery 表格插件,具有丰富的设置和方法,可以方便地实现各种网页表格的交互功能,并帮助开发者提高页面质量和用户体验。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
6.删除一列
// 删除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();
});
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
function checkAll(evt){
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
});
}
//方法四:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}
});
}
//将数据插入表格的下一行
$("#tr").after("<tr><td></td></tr>");
});
2.奇偶行不同颜色
$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0){
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三:
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
4.隐藏一列
$('#table1 tr td::nth-child(3)').hide();
5.删除一行
// 删除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();
}
}
});
}
13.客户端保存
function btnSaveClick(){
//find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
}
12.客户端删除一行
每次只能删除一行,删除多行时出错
function btnDeleteRow(){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked")){
8.插入一行
// 在第二个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));
9.获取每一行指定的单元格的值
$('#table1 tr td:nth-child(1)').each(function (key, value) {
});
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
$("#table1 tbody tr:even").addClass("even");
3、隐藏一行
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
}
11.客户端动态添加行
function btnAddRow(){
//行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
arr.push($(this).html());
});
var result = arr.join(',');
10.全选或全不选
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall"){/不能删除标题行
if(chk.attr("checked")){
$(this).remove();
alert($(this).find("input[type='text']").val());
}else if($(this).find("select").length>0)