ligerUI总结—— grid表格篇（1）_ligergrid 设置选中行-CSDN博客

本文链接：https://blog.csdn.net/whdmxl991/article/details/42388265

1、引入头文件

 <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
  <script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>

2、项目实例

本实例主要的特色功能有：

1）格式化输出，通过判断数据来调整显示时的颜色字体等

2）自定义列功能，用户可以根据项目需求增加列功能

3）默认行的checkbox为选中状态

4）双击行事件，双击行打开新的页签

 var grid = $("#appgrid").ligerGrid({
                columns: [
            { name: "ID", display: "申请ID", hide: true },
            { name: "ApplicationTime", display: "申请日期", width: "80" },
            { name: "ApplicationTimeLength", display: "申请借阅时长", width: "80" },

            { name: "BorrowType", display: "申请借阅文档类型", width: "120" },
            { name: "LeaderAuditResult", display: "领导审核结果", width: "80",
                render: function (row) {	//格式化输出
                    if (row.LeaderAuditResult == "1") {
                        var html = "<span>" + "通过" + "</span>";
                    }
                    else {	//“未通过"颜色为红色
                        var html = "<span style='color:red'>" + "未通过" + "</span>";
                    }
                    return html;
                } 
            },
        	//增加列功能--删除
             { display: '操作', isAllowHide: false, width: "120",
            	   render: function (row) {
                var html = '<a href="#" οnclick="Delete(' + row.ID + ')">删除</a>';
                return html;
                }
             }
            ],
            onDblClickRow: function (data, rowindex, rowobj) { 
			//双击行事件
                    navtab.addTabItem({ text: "借阅详情", height: "600", url: "../ArchiveBorrow/LeaderAudit.aspx?Appid=" + data.ID });//打开新的标签
                },
                inWindow: true, width: "100%", height: "100%",
                usePager: true, pageSize: 10, 
 		   isChecked: function (rowdata) { return true; },  //默认选择checkbox
                pageParmName: 'page', pagesizeParmName: "pagesize",
                url: "../handler/LeaderList.ashx?userid=" + userid
            });
        })

以上表格中定义的Delete功能函数：

 function Delete(id) {
            $.ajax({
                load: "正在加载.....",
                type: "post",
                url: "../handler/DeleteApplication.ashx",
                data: { "id": id },
                success: function (resualt) {
                    if (resualt == "删除成功") {
                        alert(resualt);
                        window.location.reload();	//JS刷新当前页面
                    }
                    else {
                        alert(resualt);
                    }

                },
                error: function (message) {
                    alert(message);
                }
            })
        }; 
 
表格中定义的增加新的页签功能的实现：
JS代码：
  $(function () {
            $("#navtab").ligerTab();
            var navtab = $("#navtab").ligerGetTabManager();
} 
HTML代码：
<body>
    <div id="navtab">
        <div  title="审批列表">
        <span style='color:red'>操作提示：请双击行以查看借阅详情</span>
            <div id = "appgrid">
            </div>
        </div>
    </div>
</body>