checkbox选中控制

控制选中方式

选中方式示例

事件与数据源

事件捕捉

选中数据源获取

在大多数情况下，表格都是需要checkbox选中控制的，我们需要根据点选的行，获取选中的数据源来实现一些特定的功能交互。基于datatable的官方API，我们自主封装了checkbox的一系列控制方法。

checkbox选中控制

控制选中方式

● 表格的checkbox功能，我们通过form元素的class名edit_validate来控制。
● form标签不能嵌套，一般情况下，一个form中只能有一个表格。
● form的属性is_check控制选中方式，其值默认为true，点击checkbox列多选，点击其它单元格为单选；其值为false时，禁用checkbox功能；其值为radio时，只能单选，且自动禁用全选功能；其值为multi时，点击任意单元格都是多选。

is_check属性值	选中方式
true(默认值)	点击checkbox列多选，点击其它单元格为单选
false	禁用checkbox功能
radio	只能单选，且自动禁用全选功能
multi	点击任意单元格都是多选

选中方式示例

● 还可以动态设置选中方式哦。

<!--edit_validate加在form上，控制checkbox与校验-->
<!--form的属性is_check控制选中方式，其值默认为true，点击checkbox列多选，点击其它单元格为单选；其值为false时，禁用checkbox功能；其值为radio时，只能单选，且自动禁用全选功能；其值为multi时，点击任意单元格都是多选-->
<form class="wj_portlet wj_port_datatable edit_validate" is_check="true" style="height:400px;">
  <!--其它元素与portlet写法一致-->
  <div class="wj_portlet_title">
    <div class="wj_caption"> <i class="fa fa-th-large"> </i> 数据列表 </div>
    <div class="wj_tools"> <a class="wj_collapse"></a>
      <div class="wj_rt" style="width:200px;">
        <div class="wj_form_group wj_box">
          <label class="wj_label">设置选中方式:</label>
          <div id="checkbox_type" class="wj_flex"> </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wj_portlet_body"> 
    <!--dataTable 是必加类名--> 
    <!--display 控制表格隔行跳色--> 
    <!--nowrap控制表格单元格文字不换行--> 
    <!--cellborder 控制表格有边框-->
    <table id="example" class="display nowrap cell-border dataTable">
    </table>
  </div>
</form>
<script>
/* 表格初始化 */
sweet.select({
	"target":"#checkbox_type",
	"item":[{"id":"true","text":"true"},
			{"id":"false","text":"false"},
			{"id":"radio","text":"radio"},
			{"id":"multi","text":"multi"}],
	"val":"true",
	"search":false,
	"multi":"radio"
});
$("#checkbox_type").on("change",function(){
	var checkType = sweet.selectVal(this).id;
	alert("表格checkbox控制方式将被设置为："+checkType);
	$('#example').closest("form").attr("is_check",checkType);
	table.ajax.reload();
});
var table = $('#example').DataTable({
	"ajax": {
		"type": "post",
		"url": wjHost+folderName+"/js/json/example_table.asp",
		"data": function (d) {
			d.extra_search = "12312321"; //如需自定义参数
			return JSON.stringify(d);
		},
		"dataType": "json",
		"contentType": "application/json",
		"dataSrc": function (result) {
			return dtCommon.setRowNum(result).data;
		}
	},
	"scrollX": true,
	"scrollY": "300px",
	"lengthMenu": [
		[10, 20, 50, 100, -1],
		[10, 20, 50, 100, "All"]
	], //每页显示条数设置   
	"lengthChange": true, //是否允许用户自定义显示数量   
	"bPaginate": true, //翻页功能  
	"searching": false, //本地搜索
	"ordering": true, //排序功能  
	//"autoWidth": true,//自动宽度   
	"language": {
		"url": wjHost + "/sweet-bases/datatables/dtCH.json"
	}, //配置语言
	"order": [
		[1, "asc"]
	], //默认排序列
	"columns": [{
			"title": '<input type="checkbox" class="dt_checkbox" tabindex="-1" />',
			"data": null,
			"orderable": false,
			"className": "dt_check",
			"render": function (data, type, row, meta) {
				return '<input type="checkbox" class="dt_checkbox" tabindex="-1" />';
			}
		}, //checkbox列  
		{
			"title": '序号',
			"data": "RowNum",
			"className": "serial_number"
		}, //序号列      
		{
			"title": "first_name",
			"data": "first_name",
			"width": "10px"
		}, {
			"title": "last_name",
			"data": "last_name",
		}, {
			"title": "position",
			"data": "position"
		}, {
			"title": "office",
			"data": "office"
		}, {
			"title": "start_date",
			"data": "start_date"
		}, {
			"title": "salary",
			"data": "salary"
		}
	]
});
</script>
	<!--模块化引入datatable组件库-->	
	<script>
	wjRequire.src({"js":["/sweet-bases/datatables/js/jquery.dataTables.min.js",//datatable表格核心组件
	                     "/sweet-bases/js/datatables-common.js",//datatable表格公用拓展方法
						 ],
	               "css":["/sweet-bases/datatables/css/jquery.dataTables.min.css"] //datatable样式文件    	
				  });
	</script>	
    <script>
/* 表格初始化 */
var table = $('#example').DataTable({
	"ajax": {
		"type": "post",
		"url": wjHost+folderName+"/js/json/example_table.asp",
		"data": function (d) {
			d.extra_search = "12312321"; //如需自定义参数
			return JSON.stringify(d);
		},
		"dataType": "json",
		"contentType": "application/json",
		"dataSrc": function (result) {
			return dtCommon.setRowNum(result).data;
		}
	},
	"scrollX": true,
	"scrollY": "300px",
	"lengthMenu": [
		[10, 20, 50, 100, -1],
		[10, 20, 50, 100, "All"]
	], //每页显示条数设置   
	"lengthChange": true, //是否允许用户自定义显示数量   
	"bPaginate": true, //翻页功能  
	"searching": false, //本地搜索
	"ordering": true, //排序功能  
	//"autoWidth": true,//自动宽度   
	"language": {
		"url": wjHost + "/sweet-bases/datatables/dtCH.json"
	}, //配置语言
	"order": [
		[1, "asc"]
	], //默认排序列
	"columns": [{
			"title": '<input type="checkbox" class="dt_checkbox" tabindex="-1" />',
			"data": null,
			"orderable": false,
			"className": "dt_check",
			"render": function (data, type, row, meta) {
				return '<input type="checkbox" class="dt_checkbox" tabindex="-1" />';
			}
		}, //checkbox列  
		{
			"title": '序号',
			"data": "RowNum",
			"className": "serial_number"
		}, //序号列      
		{
			"title": "first_name",
			"data": "first_name",
			"width": "10px"
		}, {
			"title": "last_name",
			"data": "last_name",
		}, {
			"title": "position",
			"data": "position"
		}, {
			"title": "office",
			"data": "office"
		}, {
			"title": "start_date",
			"data": "start_date"
		}, {
			"title": "salary",
			"data": "salary"
		}
	]
});	
</script>

事件与数据源

事件捕捉

● 如果想要捕捉选中以后的change事件，一般可以通过给表格的行tr绑定click事件。如下：

		//给tr绑定click事件
		$('#example').on("click","tr",function(){
			setTimeout(function(){//执行顺序控制
			alert(123);//执行点选以后的代码
	},0);
})

获取选中数据源

● 如果想要获取选中行的数据源，依然可以通过给表格的行tr绑定click事件。如下：

	
<form class="wj_portlet wj_port_datatable edit_validate" is_check="true" style="height:400px;">
  <!--其它元素与portlet写法一致-->
  <div class="wj_portlet_title">
    <div class="wj_caption"> <i class="fa fa-th-large"> </i> 数据列表 </div>
    <div class="wj_tools"> <a class="wj_collapse"></a>
    </div>
  </div>
  <div class="wj_portlet_body"> 
    <!--dataTable 是必加类名--> 
    <!--display 控制表格隔行跳色--> 
    <!--nowrap控制表格单元格文字不换行--> 
    <!--cellborder 控制表格有边框-->
    <table id="example2" class="display nowrap cell-border dataTable">
    </table>
  </div>
</form>
<script>
/* 表格初始化 */
var table = $('#example2').DataTable({
	"ajax": {
		"type": "post",
		"url": wjHost+folderName+"/js/json/example_table.asp",
		"data": function (d) {
			d.extra_search = "12312321"; //如需自定义参数
			return JSON.stringify(d);
		},
		"dataType": "json",
		"contentType": "application/json",
		"dataSrc": function (result) {
			return dtCommon.setRowNum(result).data;
		}
	},
	"scrollX": true,
	"scrollY": "300px",
	"lengthMenu": [
		[10, 20, 50, 100, -1],
		[10, 20, 50, 100, "All"]
	], //每页显示条数设置   
	"lengthChange": true, //是否允许用户自定义显示数量   
	"bPaginate": true, //翻页功能  
	"searching": false, //本地搜索
	"ordering": true, //排序功能  
	//"autoWidth": true,//自动宽度   
	"language": {
		"url": wjHost + "/sweet-bases/datatables/dtCH.json"
	}, //配置语言
	"order": [
		[1, "asc"]
	], //默认排序列
	"columns": [{
			"title": '<input type="checkbox" class="dt_checkbox" tabindex="-1" />',
			"data": null,
			"orderable": false,
			"className": "dt_check",
			"render": function (data, type, row, meta) {
				return '<input type="checkbox" class="dt_checkbox" tabindex="-1" />';
			}
		}, //checkbox列  
		{
			"title": '序号',
			"data": "RowNum",
			"className": "serial_number"
		}, //序号列      
		{
			"title": "first_name",
			"data": "first_name",
			"width": "10px"
		}, {
			"title": "last_name",
			"data": "last_name",
		}, {
			"title": "position",
			"data": "position"
		}, {
			"title": "office",
			"data": "office"
		}, {
			"title": "start_date",
			"data": "start_date"
		}, {
			"title": "salary",
			"data": "salary"
		}
	]
});
		//给tr绑定click事件
		$('#example2').on("click","tr",function(){
			setTimeout(function(){//执行顺序控制
			var dataSelected = table.rows(".selected").data().toArray();//获取选中数据
			alert(JSON.stringify(dataSelected));	
		},0);	
		})
</script>