asp_JQEasyUI

newsList.html:

 <script type="text/javascript">


        $(function () {
            initTable();
            $("#editDiv").css("display", "none");


        });


        function initTable() {
            $('#tt').datagrid({
                url: 'LoadPageNew.ashx', //表格初始化后  自动异步从后台url地址获取数据，rows：pageSize，page：pageIndex  要求后台返回的数据：json：{total：30，rows：[{},{}]}


                title: '演示表格使用',
                width: 700,
                height: 400,
                fitColumns: true, //自适应列
                idField: 'ID', //主键列，后台传来的主键，大小写必须一样
                loadMsg: '正在加载新闻的信息...',
                pagination: true, //允许分页
                singleSelect: false, //单行选中
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: {}, //往后台传参数
                columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'ID', title: '主键', width: 80 },
{ field: 'title', title: '新闻标题', width: 120 },
                        { field: 'Date', title: '提交日期', width: 120 },
                        { field: 'people', title: '新闻发布人', width: 120 },
{ field: 'type', title: '新闻 类型', width: 80, align: 'right',
   formatter: function (value, row, index) {
       return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
   }
},
{ field: 'picUrl', title: '图片', width: 80, align: 'right',
    styler: function (value, row, index) {
        if (value.length > 0) {
            return 'background-color:#ffee00;color:red;';
        }
    },
    formatter: function (value, row, index) {
        //         return "<a href='#' οnclick='editGoodsPrice(" + row.goodsid + ");return false;'>" + value + "</a>";
        return "<img src='" + value + "'/>";
    }
}
]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                    //重新加载表格，第一个方法名，后面放参数
                        $("#tt").datagrid("reload");
                    }
                },{
                    id: 'btnEdit',
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: editClick
                }, {
                    id: 'btnRemove',
                    text: '删除',
                    iconCls: 'icon-cancel',
                    handler: deleteClick
                }],
                onHeaderContextMenu: function (e, field) {


                }
            });


        }
        //删除
        function deleteClick() { 
            var selectRows = $("tt").datagrid("getSelections");
            if (selectRows.length < 1) {
                $.messager.alert("提示消息", "请选中后删除");
                return;
            }
            var strIds = "";
            for (var key in selectRows) {
                strIds += selectRows[key].ID + ",";


            }
            strIds += strIds(0, strIds.lastIndexOf(','));


            //发送异步请求删除后台数据


            //清除选中
            $("#tt").datagrid("clearSelections");
        }
        //点击了修改按钮之后
        function editClick() {
            //看用户是否掷选中了一行
            //拿到选中行的json的对象的集合
            var selectRows = $("tt").datagrid("getSelections");
            if (selectRows.length != 1) {
                $.messager.alert("提示消息", "会修改吗");
                return;
            }
            //给iframe标签赋值
            $("frmEdit").attr("src", "../AjaxCRLID/ShowEdit.aspx?id=" + selectRows[0].ID);
            $("#editDiv").css("display", "block");
            $("#editDiv").dialog({
                title: "修改。。。。",
                model: true,
                width: 300,
                height: 300,
                collapsible: true,
                minimizable: true,
                maxmizable: true,
                resizable: true,
                button: [{
                    text: "修改",
                    id: 'btnOK',
                    iconCls: 'icon-add',
                    handler: function () {
                        //出发子页面的表单的提交
                        $("#frmEdit")[0].contentWindow.subFrm();
                    }
                }, {
                    text: "关闭",
                    id: 'btnClose',
                    iconCls: 'icon-cancel', //图标
                    handler: function () {//按钮被点击时  执行此方法
                        alert("取消被点击了");
                    }
                }]
            });
        }
        function afterEditSuccess() {
            $("#editDiv").dialog("close");
            $("#tt").datagrid("reload");
        }
    </script>

<body>
   <div>


    <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit">
    </table>
    </div>
    <!------------------修改的对话框开始--------------------------->
       <div id="editDiv">
         <h3>修改的对话框</h3>
          <iframe id="frmEdit" frameborder="0" width="100%" src="javascript:void(0)">
            
         </iframe>
       </div>
     <!------------------修改的对话框结束--------------------------->

</body>

LoadNewsPage.ashx:

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int pageSize = int.Parse(context.Request["rows"]??"10");
            int pageIndex = int.Parse(context.Request["pages"]??"1");
            int total = 0;


            //输出json格式数据：{total:40,rows:[]}
            //往后台发送数据
            BLL.HKSJ_Main mainServer = new BLL.HKSJ_Main();
            List<Model.HKSJ_Main> mainList = mainServer.LoadPageMainByProc(pageSize,pageIndex,out total);
            string strPageNav = Common.LaomaPager.ShowPageNavigate(pageSize,pageIndex,total);


            System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            var data = new { total=total,rows=mainList};
            context.Response.Write(javaScriptSerializer.Serialize(data));
        }