EasyUI-数据表格DataGrid上的复选框选择

最新推荐文章于 2022-09-08 18:20:16 发布
最新推荐文章于 2022-09-08 18:20:16 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： Jquery EasyUI


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>DataGrid Cell Style - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../demo.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
        <h2>CheckBox Selection on DataGrid</h2>
        <p>Click the checkbox on header to select or unselect all selections.</p>
        <div style="margin:20px 0;"></div>

        <table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:700px;height:250px"
               data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:220">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
        <div style="margin:10px 0;">
            <span>Selection Mode: </span>
            <select οnchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
                <option value="0">Single Row</option>
                <option value="1">Multiple Rows</option>
            </select><br />
            SelectOnCheck: <input type="checkbox" checked οnchange="$('#dg').datagrid({selectOnCheck:$(this).is(':checked')})"><br />
            CheckOnSelect: <input type="checkbox" checked οnchange="$('#dg').datagrid({checkOnSelect:$(this).is(':checked')})">
        </div>
    </body>
</html>

dxm809
关注
专栏目录
easyui数据表格显示复选框_EasyUI DataGrid 复选框
weixin_42311115的博客
01-13 2295
使用checkbox，用户可以选定/取消数据行。添加checkbox列，我们简单的添加列的checkbox属性，并且设置为true。代码像这样：$('#tt').datagrid({title:'CheckboxSelect',iconCls:'icon-ok',width:600,height:250,url:'datagrid_data.json',idField:'itemid',colu...
easyui数据表格显示复选框_EASYUI DATAGRID 多列复选框CheckBox
weixin_34731217的博客
12-23 1091
主要实现：用的 easyui 1.3.2实现多个复选框列，各列互不影响。能够实现全选。主要部门用红色标记了的。easyui datagrid 初始化：function initTableGMAL() {$("#dg_gmal").datagrid({url: "/Manager/PublishManager/ashx/MALOP.ashx?action=search",idField: 'MAL_...
jQuery EasyUI DataGrid Checkbox 数据设定与取值
架构设计
07-14 785
纯粹做个记录，以免日后忘记该怎么设定。 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。 有关 jQuery EasyUI DataGrid 的相关资料，可以前往...
EASYUI DATAGRID 多列复选框CheckBox
weixin_30576827的博客
03-19 420
主要实现： 用的 easyui 1.3.2 实现多个复选框列，各列互不影响。能够实现全选。主要部门用红色标记了的。 easyui datagrid 初始化： <script> function initTableGMAL() { $("#dg_gmal").datagrid({ url: "/Manager/Pub...
easyui datagrid自定义复选框
weixin_43942765的博客
09-08 2381
easyui datagrid自定义复选框，实现审批后隐藏复选框，多选和全选的问题
EasyUI DataGrid 复选框
weixin_34233679的博客
09-27 194
使用checkbox，用户可以选定/取消数据行。添加checkbox列，我们简单的添加列的checkbox属性，并且设置为true。代码像这样：&lt;table id="tt"&gt;&lt;/table&gt;$('#tt').datagrid({    title:'Checkbox Select',    iconCls:'icon-ok',    width:600,    height...
easyui数据表格重置_EasyUI 数据表格datagrid列自适应内容宽度（不需重新加载表格）...
weixin_36031812的博客
02-23 753
项目初期在加载数据表格的时候为了提高表格数据渲染速度，设置了默认宽度。现需求需要加一个表格自适应的功能，触发改功能，改变列宽度，但是不重新渲染表格，不发生数据请求。设计思路，遍历每项的所有数据，比较字节符串长度，取最大长度。再用最大长度和标题长度比较，如果标题长就去标题长度，如果字符串长，就取字符串的。js//表格自适应方法function changeWidth(agstr){var dg = ...
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
10-21
3. 设置EasyUI表格的数据源和列，列中可以包括复选框列。 4. 在JS中，获取表格对象，并利用'onLoadSuccess'事件处理函数，在数据加载成功后对数据进行操作。 5. 在'onLoadSuccess'事件中，遍历所有加载的数据行。...
easyui datagrid 多条件筛选 可复选 类似淘宝筛选
11-23
例如，我们可以创建一个JSON对象存储所有筛选条件，每次复选框状态改变时，更新这个对象，然后调用datagrid的`reload`方法重新加载数据。 在描述中提到的"200-300"和"500-600"这样的范围筛选，可以通过EasyUI的`...
EasyUI之datagrid的复选框使用
热门推荐
El Psy Congroo
07-09 1万+
EasyUI 添加复选框 复选框是什么：放置一个复选框列到数据网格（DataGrid），用户将可以选择 选中/取消选中 网格行数据。 如何放置一个复选框：为了添加一个复选框列，只需添加一个列的 checkbox 属性，并设置它为 true。代码如下所示： &lt;table id="tt" title="Checkbox Select" class="easyui-datagrid" s...
在DataGrid中进行复选框的操作(全选和取消)
08-18
在DataGrid中进行复选框的操作(全选和取消)
easyUI 创建有复选框的table.datagrid
11-24 159
table : function(data){ pt.v.table.datagrid({ // singleSelect:true, height:295, columns:[[ {field:'xuhao',title:'0',width:'5%',checkbox:true}, {field:'sjbm',title:'数据编码',width...
雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框
weixin_30612769的博客
04-23 120
　　jQuery EasyUI 数据网格 - 添加复选框 　　本实例演示如何放置一个复选框列到数据网格(DataGrid)。通过复选框，用户将可以选择 选中/取消选中 网格行数据。 　　为了添加一个复选框列，我们仅仅需要添加一个列的 checkbox 属性，并设置它为 true。代码如下所示： 　　 　　url="data/datagrid_data.json" 　　idFie...
EasyUI的datagrid编辑复选框
LYBWWP
12-17 633
EasyUI的datagrid编辑复选框 前台 <table id="FeederTable" class="easyui-datagrid"></table> 脚本 $('#FeederTable').datagrid({ singleSelect: true, onClickRow: onClickRow2, ...
easyui datagrid checkbox使用
u011516685的博客
04-20 2006
easyui datagrid 复选框初始化和使用
easyui datagrid 复选框 多选
weixin_42475367的博客
05-13 9958
//true表示只能选择一行,所以要改为false singleSelect:false,
EasyUI表格数据多选复选框
qq_38321137的博客
03-26 3854
先摆张图 复选框列的显示，靠在js内表格的加载 1.singleSelect：false ，允许多选 2.idField 列必须正确，否则可能会影响到多选的功能(亲身经验) 3.加一列复选框列，用于选择 表格添加数据行 $('#product_table').datagrid('appendRow',{ index:index+i, powderNo: batch, createDate :plan_user_date , fkMaterilId :materialId , m
EasyUi datagrid列表增加复选框
weixin_30788731的博客
05-10 604
本文为博主原创，未经允许不得转载 1.增加复选框列 { field: 'oid', title: '<input type=\"checkbox\" name=\"selectRadioList\" id=\"selectRadioList\" checked= true onchange="selectAll()"/>', width: 28,...
r语言worldclim数据_arcgis中如何提取气候数据
weixin_39864101的博客
12-20 4044
1、arcgis中如何提取植被指数分波段导入数据，然后用3、4波段计算即可。(3-4)/(3+4)。好像是这样的，你可以具体查询一下2、arcgis如何从worldclim中提取19个气候数据问题已解决，不知道如何删帖，请管理员删帖，谢谢。3、ArcGIS中如何用点图层提取面图层的数据有个工具 extract by point你可以试试望及时采纳回答！4、在arcgis中如何把通过属性选择的要素...
jQuery EasyUI DataGrid对象显示及分页、复选多选详解
本文主要介绍了如何使用jQuery EasyUI的DataGrid组件来展示数据，并结合了分页和复选框多选功能。通过源码摘要，我们可以深入理解DataGrid的配置和自定义方法。 jQuery EasyUI的DataGrid是一个强大的表格控件，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值