JqGrid每行末尾添加按钮进行操作

最新推荐文章于 2021-09-24 13:57:14 发布
最新推荐文章于 2021-09-24 13:57:14 发布
阅读量8.6k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sugarfengye/article/details/79894927
版权 
 

1、JqGrid代码
 

 
 colModel: [  

 

 

 


  { 
 label: 
 '操作', 
 name: 
 'state', 
 index: 
 'state', 
 width: 
 50, 
 edittype: 
 "button", 
 formatter: 
 cmgStateFormat    }, 

 


  ] 

 

 

 

 

2、根据state的值显示button
 

 

 
 function  
 cmgStateFormat(cellValue,grid, rows, state) { 

 


       
 if(cellValue== 
 1){ 

 

 
 return  
 "<button class='btn btn-primary ' οnclick= 
 \" 
 change 
 (" + rows. 
 cmgId+ 
 ","+cellValue + 
 ") 
 \" 
 >上架</button>" ; } 
 else{ 

 

 
 return  
 "<button class='btn btn-warning ' οnclick= 
 \" 
 change 
 (" + rows. 
 cmgId+ 
 ","+cellValue + 
 ") 
 \" 
 >下架</button>" ; } 

 


  } 

 

 

3、发送请求后台数据动态根据id修改state
 

 

 
 
 
 
 
  function  
  change(id,state) { 
 
 
 
 
  confirm2( 
  '确定要上架或下架？', 
 
 
 
 
  function () { 
  $. 
  get( 
  url+/"+ id+ 
  "/"+state, 
  function (r) { 
 
 
 
 
  if (r. 
  code == 
  0) { 
  alert( 
  '操作成功', 
  function (index) { 
  $( 
  "#jqGrid"). 
  trigger( 
  "reloadGrid"); }); } 
  else { 
  alert(r. 
  msg); } }); });} 
 
 
 
 

 


 

 

4、效果
 

 
  


                

        

    

  



    

      

        

            

              
                
                  sugarfengye
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
2021-07-08用jqGrid 插件动态展示Table 列 (行转列) + echarts生成图表，并导出为excel的过程

				
			

			

				

					zxc25379639的博客
				

				

					07-08
					
					889
					
				

			

		

		

			
				
@2021-07-08用jqGrid 插件动态展示Table 列  echarts生成图表，并导出为excel的过程
欢迎来到一只老菜鸟
你好！ 这是你第一次写文章，项目所用技术都是老技术，此前没有写文章的习惯，这也是从业几年来首次编写，望大家多多指教，互相观摩学习
本次项目为c#语言编写，本人也只干了几年的c#，技术方面请各位大佬指导。
问题描述：需要将日期、总数、合格数、良率 列转行 ，生成一个月度统计表，上面是数据，下面是数据形成的日趋势图 合并导出到excel 要求效果如下

这是整理后的原始数据


			
		

	



                

            
              



	

		

			

				
					
Failed to load response dataNo data found for resource with given identifier

				
			

			

				

					embelfe_segge的博客
				

				

					03-03
					
					3783
					
				

			

		

		

			
				
文章目录

一、遇到问题
二、原因分析


2.1、form表单action请求打断了ajax请求
2.2、映像图解释


三、解决方法


3.1、方式一：ajax改为同步
3.2、方式二：分离ajax和form action
3.3、方式三：阻止表单默认提交机制


（1）修改按钮type为button
（2）利用preventDefault()方法
（3）form标签中添加οnsubmit=“return false;”





一、遇到问题
最近项目中表单提交需求遇到了这个问题。

Failed 

			
		

	



              


  
              

                


	

		

			

				
					
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

				
			

			

				

					11-29
				

			

		

		

			
				
在使用JqGrid时，Table中最后一列是操作列，在操作列中每一行都一个操作按钮，该操作按钮类似下拉菜单，如下图：

在点击Table中【操作】一列时需要弹出一个Div层，该Div层中包含一堆按钮，用于对Table行进行操作，如下：

解决步骤如下：
1、首先，在colModel中的列上添加属性edittype:’select’和方法formatter:groupGrid.formatOptions，如下图：

方便复制，代码如下：

{label:'操作',name: 'operations',index: 'operations',width: 80, sortable: false,a

			
		

	





	

		

			

				
					
jqgrid 操作按钮

				
			

			

				

					June的专栏
				

				

					09-24
					
					708
					
				

			

		

		

			
				
操作列，增加按钮，代码如下：

colmodel设置formatter参数


{name : 'MANAGE',width : 80,edittype:"button", formatter: cmgStateFormat }

cmgStateFormat方法返回按钮html代码


// 返回按钮样式
		function cmgStateFormat(grid, rows, state) {
			return "<button class='btn btn-primary btn-xs...

			
		

	



		

			
		



	

		

			

				
					
jqGrid表格添加‘操作’列，自定义按钮

				
			

			

				

					nnaay_的博客
				

				

					03-05
					
					2130
					
				

			

		

		

			
				
第一种：
{ 
	label: '操作', name: 'Operate', width: 80, align: 'center', edittype:"button", formatter:function(cellvalue, options, rowObject){
	return "<button class='btn btn-danger' style='padding:3px 1...

			
		

	





	

		

			

				
					
在JqGrid表格中自动生成按钮

				
			

			

				

					chp891202的博客
				

				

					12-13
					
					7599
					
				

			

		

		

			
				
1、在js中的jqGrid中下如下代码，自动生成按钮主要是colModel中最后一个name

jQuery("#table1").jqGrid(
            {
            url:"userManageSelect.html",
            datatype: "json", 
            mtpe:'post',
        

			
		

	





	

		

			

				
					
JQGrid 添加按钮

					
热门推荐

				
			

			

				

					追求卓越,做到专业
				

				

					12-21
					
					1万+
					
				

			

		

		

			
				
JQGrid 添加自定义按钮, 按钮显示文字Save. 参考:自定义按钮

$("#ReportList").jqGrid('navButtonAdd', '#ReportListPager', { caption: "Save", onClickButton: function() { $("#btnSaveAs").trigger("click"); } });

属性及方法:

...

			
		

	





	

		

			

				
					
jQuery实现在列表的首行添加数据

				
			

			

				

					10-24
				

			

		

		

			
				
 - append()方法将内容添加到每个匹配元素的末尾，即元素内部的最后面。  - prepend()方法则将内容添加到每个匹配元素的开头，即元素内部的最前面。   根据本次文档所介绍的，在列表中首行添加数据通常使用prepend()...

			
		

	





	

		

			

				
					
jquery大全.zip

				
			

			

				

					07-20
				

			

		

		

			
				
同时，jQuery提供了一套丰富的链式操作方法，如`.html()`用于修改元素内容，`.css()`调整样式，`.append()`在元素末尾添加内容等。  二、jQuery与jqGrid  jqGrid是一款基于jQuery的数据网格插件，用于展示和操作大量...

			
		

	





	

		

			

				
					
JqueryDataGridDemo分页

				
			

			

				

					10-11
				

			

		

		

			
				
jQuery DataGrid允许我们自定义分页行为，例如添加分页事件监听器，以便在用户切换页面时执行特定操作：  ```javascript $("#grid").jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}, {}, {}, {...

			
		

	





	

		

			

				
					
jqgrid自定义按钮

				
			

			

				

					02-13
				

			

		

		

			
				
jqgrid自定义按钮，jqgrid自定义按钮，jqgrid自定义按钮

			
		

	





	

		

			

				
					
在jqGrid中新增、删除、编辑等操作按钮

				
			

			

				

					chituZip的博客
				

				

					08-23
					
					8983
					
				

			

		

		

			
				
在jqGrid中新增、删除、编辑等操作按钮，使用formatter方法！
CSS代码colNames : [ '主键',  '客户姓名', '申请开卡'],
colModel : [ 
            {name: 'id', index: 'id', hidden:true},
            {name: 'customerName',index: 'customerName',

			
		

	





	

		

			

				
					
使用JqGrid实现数据表格的操作行按钮

				
			

			

				

					fish332的博客
				

				

					12-01
					
					1544
					
				

			

		

		

			
				
使用JqGrid实现数据表格的操作行按钮

			
		

	





	

		

			

				
					
jqgrid 每行添加操作按钮 几种方式

				
			

			

				

					爱跳舞的程序员
				

				

					11-20
					
					100
					
				

			

		

		

			
				
方法一、使用formatter (摘自连接https://blog.youkuaiyun.com/sugarfengye/article/details/79894927)
1、JqGrid代码
colModel: [
{label:'操作',name:'state',index:'state',width:50,edittype:"button",formatter:cmgStat...

			
		

	





	

		

			

				
					
jqgrid单元格中增加按钮

				
			

			

				

					
				

				

					01-13
					
					674
					
				

			

		

		

			
				
1、增加列配置
{ label: '问题数据', name: 'action', width: 80, align: 'center' }
2、函数
gridComplete: function () {
 var ids=$(gridIdRWJC).jqGrid("getDataIDs");                for(var i=0;i<ids.length;...

			
		

	





	

		

			

				
					
jqgrid--自定义按钮

				
			

			

				

					jonathan的专栏
				

				

					08-05
					
					1万+
					
				

			

		

		

			
				
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});  
 
新的API
 
    jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});  
 


			
		

	





	

		

			

				
					
Jqgrid入门-操作表格的数据(二)

				
			

			

				

					aichuxia4449的博客
				

				

					06-27
					
					417
					
				

			

		

		

			
				
上一篇中，Jqgrid已经可以从服务端获得数据，并显示在Grid表格中了。下面说一下，如何操作表格及其数据。

 jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：
 $(“#grid_id”).jqGridMethod( parameter1,…,parameterN );
或者
...

			
		

	





	

		

			

				
					
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

				
			

			

				

					weixin_34074740的博客
				

				

					06-29
					
					260
					
				

			

		

		

			
				
 
系列索引
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 &am...

			
		

	





	

		

			

				
					
bootstrap jqgrid 操作一列 添加删除按钮

					
最新发布

				
			

			

				

					05-27
				

			

		

		

			
				
可以使用 jqGrid 自带的 formatter 属性来实现操作列。首先，在 colModel 中定义操作列的属性，如下：  ``` { ...如果需要添加更多的操作按钮，可在 formatter 和 gridComplete 中添加对应的代码。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值