PNSRM/NFine.Web/Areas/SystemManage/Views/CommonReport/Cols.cshtml

@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
<link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" />
<script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>
<style>
    * {
        box-sizing: border-box;
    }
    .form-control {
        width:95%
    }
</style>
<script>
    var SourceID = $.request("SourceID");
    var MenuID = $.request("MenuID");
    
    var DataTypeString = new Array();
    var NewLine = 0;
    var MaxPaiXu = 0;
    var FirstShow = 0;

    $(function () {
        debugger;
        DataTypeString = GetDataTypeString();
        gridList();
        $(window).resize(function () {

            $("#gridList").setGridWidth($(window).width() * 0.99);
            $("#gridList").setGridWidth(document.body.clientWidth * 0.99);
            $("#gridList").setGridHeight($(window).height() - 96);
            $("#gridList").setGridHeight(document.body.clientHeight - 96);
        });
    });

    function gridList() {
        document.getElementsByClassName("gridPanel")[0].innerHTML = '  <table id="gridList"></table>';
        
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/SystemManage/CommonReport/GetCols?" + Math.random(),
            postData: { SourceID: SourceID },
            height: $(window).height() - 96,
            width:"100%",
            colModel: [//IDStr  显示名称 字段名称 数据类型 小数点位数 字段宽度 
                //合并相同项 合并相同项Key 汇总 从属表头 显示 显示顺序 允许排序 自定义项 自定义公式
                //ColCaption	ColFiledName	DataType	DefineFlag	FunctionString	DeciamlNum	
                //ColWidth	ColMerFlag	ColMerKeyFlag	ColSumFlag	HeaderId	COrder	VisbleFlag	SortFlag
                 {
                     label: 'IDStr', name: 'IDStr', width: 80, align: 'left', sortable: false,
                 },
                     { label: 'ColCaption', name: 'ColCaption', hidden: true, },
                     { label: 'ColFiledName', name: 'ColFiledName', hidden: true, },
                     { label: 'DataType', name: 'DataType', hidden: true, },
                     { label: 'DefineFlag', name: 'DefineFlag', hidden: true, },
                     { label: 'FunctionString', name: 'FunctionString', hidden: true, },
                     { label: 'DeciamlNum', name: 'DeciamlNum', hidden: true, },
                     { label: 'ColWidth', name: 'ColWidth', hidden: true, },
                     { label: 'ColMerFlag', name: 'ColMerFlag', hidden: true, },
                     { label: 'ColMerKeyFlag', name: 'ColMerKeyFlag', hidden: true, },
                     { label: 'ColSumFlag', name: 'ColSumFlag', hidden: true, },
                     { label: 'HeaderId', name: 'HeaderId', hidden: true, },
                     { label: 'COrder', name: 'COrder', hidden: true, },
                     { label: 'VisbleFlag', name: 'VisbleFlag', hidden: true, },
                     { label: 'SortFlag', name: 'SortFlag', hidden: true, },
                    {
                        label: '显示名称', name: '显示名称', width: 130, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var    str_retrun = '<input type="text" class="form-control"  id="ColCaption_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '字段名称', name: '字段名称', width: 130, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control"  id="ColFiledName_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '数据类型', name: '数据类型', width: 120, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {

                            var str_retrun = '<select class="selectpicker" id="selDataType_' + rowObject.IDStr + '"  Title=""   data-width="90px" > ';
                            str_retrun += "<option value=''></option>";
                            for (var i = 0; i < DataTypeString.length; i++) {
                                str_retrun += "<option value=\"" + DataTypeString[i].value + "\">" + DataTypeString[i].Str + "</option>";
                            }
                            str_retrun += '</select>';
                            return cellvalue = str_retrun;

                        }
                    },
                    {
                        label: '小数点位数', name: '小数点位数', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control"  id="DeciamlNum_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '字段宽度', name: '字段宽度', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control"  id="ColWidth_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '合并相同项', name: '合并相同项', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                             
                            var str_retrun = '<input type="checkbox"  name="ColMerFlag_' + rowObject.IDStr + '" ';
                            str_retrun += ' id="ColMerFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    }, {
                        label: '合并相同项Key', name: '合并相同项Key', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                             
                            var str_retrun = '<input type="checkbox"  name="ColMerKeyFlag_' + rowObject.IDStr + '" ';
                            str_retrun += ' id="ColMerKeyFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    },{
                        label: '汇总', name: '汇总', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            
                            var str_retrun = '<input type="checkbox"  name="ColSumFlag_' + rowObject.IDStr + '" ';
                            str_retrun += ' id="ColSumFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    },
                    {
                        label: '从属表头', name: '从属表头', width: 90, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control" id="HeaderId_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    }, {
                        label: '显示', name: '显示', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            
                            var str_retrun = '<input type="checkbox"  name="VisbleFlag_' + rowObject.IDStr + '" ';
                            str_retrun += ' id="VisbleFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    },

                    {
                        label: '显示顺序', name: '显示顺序', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control" id="COrder_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    }, {
                        label: '允许排序', name: '允许排序', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            
                            var str_retrun = '<input type="checkbox"  name="SortFlag_' + rowObject.IDStr + '" ';
                            str_retrun += ' id="SortFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    }, {
                        label: '自定义项', name: '自定义项', width: 60, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="checkbox"  name="DefineFlag_' + rowObject.IDStr + '" ';
                            str_retrun+=' id="DefineFlag_' + rowObject.IDStr + '"  value="' + cellvalue + '"    ';
                            return cellvalue = str_retrun;

                        }
                    }, {
                        label: '自定义公式', name: '自定义公式', width: 200, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            var str_retrun = '<input type="text" class="form-control" id="FunctionString_' + rowObject.IDStr + '"  value="' + cellvalue + '"  />';
                            return cellvalue = str_retrun;
                        },
                    },


            ],
            // pager: "#gridPager",
            //sortname: '显示顺序',
            ////  rowNum: -1,
            //sortorder: 'asc',
            viewrecords: true,
            rownumbers: true,
            multiselect: true,
            rowNum: 500,
            // cellEdit: false,
            // multiboxonly: true,
            // multikey:'shiftKey',
            gridComplete: function () {
                $("#gridList").setGridParam().hideCol("IDStr");//隐藏ID列
                $("#gridList").setGridParam().hideCol("自定义项");//隐藏ID列
                $("#gridList").setGridParam().hideCol("自定义公式");//隐藏ID列
                
                var strIds = $("#gridList").jqGrid("getDataIDs");
                if (FirstShow == 0) {
                    for (var i = 0; i < strIds.length; i++) {
                        var IDStr = $("#gridList").jqGrid("getCell", strIds[i], "IDStr");

                        //DataType
                        var selDataType = $("#gridList").jqGrid("getCell", strIds[i], "DataType");
                        $("#selDataType_" + IDStr).selectpicker('refresh');
                        $("#selDataType_" + IDStr).selectpicker('val', selDataType);
                        

                        //DefineFlag
                        var DefineFlag = $("#gridList").jqGrid("getCell", strIds[i], "DefineFlag");
                        if (DefineFlag == "false") {
                            document.getElementById("DefineFlag_" + IDStr).checked = false;
                        }
                        else {
                            document.getElementById("DefineFlag_" + IDStr).checked = true;
                        }
                        //ColMerFlag
                        var ColMerFlag = $("#gridList").jqGrid("getCell", strIds[i], "ColMerFlag");
                        if (ColMerFlag == "false") {
                            document.getElementById("ColMerFlag_" + IDStr).checked = false;
                        }
                        else
                        {
                            document.getElementById("ColMerFlag_" + IDStr).checked = true;
                        }
                        //ColMerKeyFlag
                        var ColMerKeyFlag = $("#gridList").jqGrid("getCell", strIds[i], "ColMerKeyFlag");
                        if (ColMerKeyFlag == "false") {
                            document.getElementById("ColMerKeyFlag_" + IDStr).checked = false;
                        }
                        else {
                            document.getElementById("ColMerKeyFlag_" + IDStr).checked = true;
                        }
                        //ColSumFlag
                        var ColSumFlag = $("#gridList").jqGrid("getCell", strIds[i], "ColSumFlag");
                        if (ColSumFlag == "false") {
                            document.getElementById("ColSumFlag_" + IDStr).checked = false;
                        }
                        else {
                            document.getElementById("ColSumFlag_" + IDStr).checked = true;
                        }
                        //VisbleFlag
                        var VisbleFlag = $("#gridList").jqGrid("getCell", strIds[i], "VisbleFlag");
                        if (VisbleFlag == "false") {
                            document.getElementById("VisbleFlag_" + IDStr).checked = false;
                        }
                        else {
                            document.getElementById("VisbleFlag_" + IDStr).checked = true;
                        }
                        //SortFlag
                        var SortFlag = $("#gridList").jqGrid("getCell", strIds[i], "SortFlag");
                        if (SortFlag == "false") {
                            document.getElementById("SortFlag_" + IDStr).checked = false;
                        }
                        else {
                            document.getElementById("SortFlag_" + IDStr).checked = true;
                        }

                    }
                    FirstShow = 1;
                }
                NewLine = strIds.length;

                $("#gridList").jqGrid('hideCol', 'cb');//隐藏勾选框 //勾选框选中的时候 与行选中有异常，所以隐藏
            },


        });
    }

    function SHowcols(colname) {
        $("#gridList").setGridParam().showCol(colname);

    }

    function Hiddencols(colname) {
        $("#gridList").setGridParam().hideCol(colname);

    }

    //添加新增列
    function btn_ReSet()
    {
        $.ajax({
            url: "/SystemManage/CommonReport/ReSetCols" + "?" + Math.random(),
            type: "post",
            data: { MenuID: MenuID },
            async: false,
            success: function (data) {
                alert(data);
                NewLine = 0;
                MaxPaiXu = 0;
                FirstShow = 0;
                gridList();
            },
            error: function (aa) {
                //alert("异常：" + aa.responseText);

                $.modalAlertNew("WMS00015", aa.responseText);
            }
        });
      
    }

    //新增一行
    function btn_ADD() {
        NewLine = NewLine + 1;
        MaxPaiXu = MaxPaiXu + 1;
        var ids = jQuery("#gridList").jqGrid('getDataIDs');
        if (ids.length == 0) {
            ids = [0];
        }
        //获得当前最大行号（数据编号）
        var rowid = Math.max.apply(Math, ids);
        //获得新添加行的行号（数据编号）
        var newrowid = rowid + 1;


        $("#gridList").addRowData(newrowid,
            {//IDStr  显示名称 字段名称 数据类型 小数点位数 字段宽度 
                //合并相同项 合并相同项Key 汇总 从属表头 显示 显示顺序 允许排序 自定义项 自定义公式
                //ColCaption	ColFiledName	DataType	DefineFlag	FunctionString	DeciamlNum	
                //ColWidth	ColMerFlag	ColMerKeyFlag	ColSumFlag	HeaderId	COrder	VisbleFlag	SortFlag
                "IDStr": NewLine.toString(),
                "ColCaption": "",
                "ColFiledName": "",
                "DataType": "",
                "DeciamlNum": "",
                "ColWidth": "",
                "ColMerFlag": "",
                "ColMerKeyFlag": "",
                "ColSumFlag": "",
                "HeaderId": "",
                "VisbleFlag": "",
                "COrder": MaxPaiXu,
                "SortFlag": "",
                "DefineFlag": "",
                "FunctionString": "",

                "显示名称": "",
                "字段名称": "",
                "数据类型": "",
                "小数点位数": "",
                "字段宽度": "",
                "合并相同项": "",
                "合并相同项Key": "",
                "汇总": "",
                "从属表头": "",
                "显示": "",
                "显示顺序": "",
                "允许排序": "",
                "自定义项": "",
                "自定义公式": "",

            },
           "last");
        var unwritten = document.getElementsByClassName("unwritten")[0];
        if (unwritten != null && unwritten != 'undefined') {
            unwritten.style.display = "none";
        }
        // $(".unwritten").attr("display", "none");


        //刷新下拉框 select
        var strIds = $("#gridList").jqGrid("getDataIDs");

        var rr = strIds.length - 1;
        var IDStr = $("#gridList").jqGrid("getCell", strIds[rr], "IDStr");

        //DataType
        var selDataType = $("#gridList").jqGrid("getCell", strIds[rr], "DataType");
        $("#selDataType_" + IDStr).selectpicker('refresh');
        $("#selDataType_" + IDStr).selectpicker('val', selDataType);
        

    }

    //删除选中行
    function btn_Del() {

        var selectedRowIds = $("#gridList").jqGrid("getGridParam", "selarrrow");
        var len = selectedRowIds.length;
        for (var i = 0; i < len ; i++) {
            $("#gridList").jqGrid("delRowData", selectedRowIds[i]);
        }

        var selectedRowIds = $("#gridList").jqGrid("getGridParam", "selarrrow");
        var len = selectedRowIds.length;
        for (var i = 0; i < len ; i++) {
            $("#gridList").jqGrid("delRowData", selectedRowIds[i]);
        }
    }

    function submitForm() {
        var SubmitLine = new Array();
        var strIds = $("#gridList").jqGrid("getDataIDs");
        for (var i = 0; i < strIds.length; i++) {
            //IDStr  显示名称 字段名称 数据类型 小数点位数 字段宽度 
            //合并相同项 合并相同项Key 汇总 从属表头 显示 显示顺序 允许排序 自定义项 自定义公式
            //ColCaption	ColFiledName	DataType	DefineFlag	FunctionString	DeciamlNum	
            //ColWidth	ColMerFlag	ColMerKeyFlag	ColSumFlag	HeaderId	COrder	VisbleFlag	SortFlag
            var IDStr = $("#gridList").jqGrid("getCell", strIds[i], "IDStr");
            var ColCaption = $("#ColCaption_" + IDStr).val();
            var ColFiledName = $("#ColFiledName_" + IDStr).val();
            var ColCaption = $("#ColCaption_" + IDStr).val();
            var DataType = $("#selDataType_" + IDStr).val();
            var DefineFlag = checkboxToNumStr(document.getElementById("DefineFlag_" + IDStr));
            var FunctionString = $("#FunctionString_" + IDStr).val();
            var DeciamlNum = $("#DeciamlNum_" + IDStr).val();
            var ColWidth = $("#ColWidth_" + IDStr).val();
            var ColMerFlag = checkboxToNumStr(document.getElementById("ColMerFlag_" + IDStr));  
            var ColMerKeyFlag = checkboxToNumStr(document.getElementById("ColMerKeyFlag_" + IDStr));
            var ColSumFlag = checkboxToNumStr(document.getElementById("ColSumFlag_" + IDStr));
            var HeaderId = $("#HeaderId_" + IDStr).val();
            var COrder = $("#COrder_" + IDStr).val();
            var VisbleFlag = checkboxToNumStr(document.getElementById("VisbleFlag_" + IDStr));
            var SortFlag = checkboxToNumStr(document.getElementById("SortFlag_" + IDStr));
           

            var obj = {
                Id:IDStr,
                ColCaption: ColCaption,
                ColFiledName: ColFiledName,
                DataType: DataType,
                DefineFlag: DefineFlag,
                FunctionString: FunctionString,
                DeciamlNum: DeciamlNum,
                ColWidth: ColWidth,
                ColMerFlag: ColMerFlag,
                ColMerKeyFlag: ColMerKeyFlag,
                ColSumFlag: ColSumFlag,
                HeaderId: HeaderId,
                COrder: COrder,
                VisbleFlag: VisbleFlag,
                SortFlag: SortFlag,
               
            }
            SubmitLine.push(obj);
        }
       
        $.ajax({
            url: "/SystemManage/CommonReport/SetCols" + "?" + Math.random(),
            type: "post",
            data: { SourceID: SourceID, List_Cols: JSON.stringify(SubmitLine), },
            async: false,
            success: function (data) {
                alert(data);
                $.modalClose();
            },
            error: function (aa) {
                //alert("异常：" + aa.responseText);
                $.modalAlertNew("WMS00015", aa.responseText);

            }
        });
    }

   



</script>

<form id="form1">
    <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
        <div class="form-group" style="height:40px;margin-bottom:5px">

            <div class="btn-group">
                <a id="Btn_ReSet" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_ReSet()"><i class="fa fa-plus"></i>添加新增列</a>
                @*<a id="Btn_ADD" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_ADD()"><i class="fa fa-plus"></i>新增</a>*@
                <a id="Btn_Del" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_Del()"><i class="fa fa-minus"></i>删除</a>
                
            </div>

        </div>
        <div class="gridPanel">
            <table id="gridList"></table>
            @*<div id="gridPager"></div>*@
        </div>
    </div>
</form>