您的位置：首页 > 产品设计 > UI/UE

easyui datagrid 创建带复选框表格(2)

2017-01-12 14:48 429 查看 

1.源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description"
content="easyui help you build your web page easily!">
<title>创建带复选框的datagrid</title>
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/demo/demo.css">
<script type="text/javascript"
src="./javascript/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="./javascript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dg').datagrid({
url : "./javascript/jquery-easyui-1.5.1/datagrid_data.json",
fitColumns : "true",
striped : true,
rownumbers:true,
checkOnSelect : 'true',
columns : [ [ {
field : 'itemid',
title : 'Order ID',
width : 200,
checkbox : true
}, {
field : 'productid',
title : 'Quantity',
width : 100,
align : 'right'
}, {
field : 'unitcost',
title : 'Unit Price',
width : 100,
align : 'right'
}] ]
});
});

</script>
</head>
<body>
<h2>创建带复选框的datagrid</h2>
<div id="dg" style="width:650px;height:250px"></div>
</body>
</html>
2.效果



3.获取选中行
var selectrow = $("#dg").datagrid("getChecked");//获取的是数组，多行数据
var idArry = [];
for(var i=0;i<selectrow.length;i++){
idArry.push(selectrow[i].userId);
}

4.datagrid属性设置点击复选框将会选中该行。如果设置为

 false，选中该行将不会选中复选框

datagrid属性设置selectOnCheck

5.datagrid属性设置点击复选框将会选中该行。如果设置为

 false，选中该行将不会选中复选框

datagrid属性设置selectOnCheck
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航