点击文本然后修改,建议用X-editable

http://vitalets.github.io/x-editable/

可以跟bootstrap或者跟jquery整合,蛮好用的。

如果跟dataTables结合起来用,相当于是extJs了,很不错。 下面是一个结合使用的例子:

  

    <script src="/assets/js/bootstrap-editable.min.js"></script>    
    <link href="/assets/css/bootstrap-editable.css" rel="stylesheet">


....

  
<script>
//某列的写法
     { "data": "firstName",	                    	 
    	 	"name": "firstName",
            "render":	function ( data, type, full, meta ) {
        		  var template = '<a href="#" class="firstNameEditable editable editable-click" data-type="text" data-pk="{1}" data-name="firstName" data-url="/updateManAjax" data-title="New First Name">{0}</a>';
            	  var html = template.format(full.firstName, full.manId);	//作者在这里使用了模板引擎,你自己直接拼字符串也可以	  	                    		  			  	                    		  
            	  return html ;
         	},	  	         		                	 	
    	 	...	         		                	 	
     },

...
//在dataTable的回调中注册editable组件。你必须写在dataTable的相关回调里面,只有等dataTable渲染完后,前面定义的editable dom结构才能被系统识别,也才能注册为editable组件
	         "drawCallback": function( settings ) {
		      	   $(".firstNameEditable").each(function(i,dom){
		      		 $(dom).editable({
		      				 success:function(response, newValue) {
		      			        if(response.failed){//是不是failed取决于你的ajax服务的json结构。  	 
		      			        	return response.error;  
		      			        }
		      			    },		
	      				    error:function(response, newValue) {
	      				    	console.log(response);
		      			        return "网络或服务端错误";  
		      			    }		
		      	   	});
		   		});
	         },	     

</script>

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.