HGSRM/SRM/NFine.Web/Areas/SystemManage/Views/CommonReport/GridFormat.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>
<link href="~/Content/css/ColorPicker/bootstrap-colorpicker.css" rel="stylesheet" />
<script src="~/Content/js/ColorPicker/bootstrap-colorpicker.min.js"></script>
<style>
    .input-lg {
        height:100%;
        width:75% !important;
    }
    .form-control {
        height:20px;
    }
    .ui-jqgrid .table-bordered td {
        line-height:12px;
        vertical-align:middle;
    }
    
</style>
<script>
    var SourceID = $.request("SourceID");
    var cols = new Array();
    
    var LogString_Num = new Array();
    var LogString_Str = new Array();
    var LogString_Date = new Array();
    var LogString_Bool = new Array();
    var NewLine = 0;
   
    var FirstShow = 0;

    $(function () {

        LogString_Num = GetLogString("数值型");
        LogString_Str = GetLogString("字符型");
        LogString_Date = GetLogString("日期型");
        LogString_Bool = GetLogString("布尔值");
        GetCols();
        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 GetCols()
    {
        $.ajax({
            url: "/SystemManage/CommonReport/GetCols?SourceID=" + SourceID + "&" + Math.random(),
            dataType: "json",
            async: false,
            success: function (aa) {
                if (aa != null) {
                    var data = aa.rows;

                    if (data != false && data != null && data.length > 0) {
                        cols=new Array();
                   
                        $("#Select_cols").find("option").remove();
                        $("#Select_cols").append("<option value=''></option>");
                        for (var i = 0; i < data.length; i++) {
                            $("#Select_cols").append("<option value='" + data[i].IDStr + "'>" + data[i].ColFiledName + "</option>");
                            cols.push({ IDStr: data[i].IDStr, DataType: data[i].DataType });
                        }

                    }
                    $('#Select_cols').selectpicker('refresh');
                    $('#Select_cols').selectpicker('render');
                    $('#Select_cols').val(data[0].IDStr);
                    $('#Select_cols').selectpicker('refresh');
                
                }
            }
        });
        
    }

    function GetDataTypeStr()
    {
        if (cols.length > 0)
        {
            for (var i = 0; i < cols.length ; i++)
            {
                if (cols[i].IDStr == $('#Select_cols').val())
                {
                    return GetDataTypeByNum(cols[i].DataType);
                }
            }
        }
    }

    function gridList() {
        document.getElementsByClassName("gridPanel")[0].innerHTML = '  <table id="gridList"></table>';
        
        var DataTypeStr = GetDataTypeStr();
       
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/SystemManage/CommonReport/GetGridFormat?" + Math.random(),
            postData: { ColId: $('#Select_cols').val() },
            height: $(window).height() - 96,
          
            width:"100%",
            colModel: [//ID	ColId	LogStr	SValue	DValue	Color	AllRowFlag
                  { label: 'ID', name: 'ID', width: 80, align: 'left',  sortable: false, },
                    { label: 'ColId', name: 'ColId', width: 80, align: 'left', sortable: false, },
                       {
                           label: 'LogStr', name: 'LogStr', width: 95, align: 'left', sortable: false,
                       },
                    {
                        label: '运算符',  width: 95, align: 'left',  sortable: false,

                        formatter: function (cellvalue, options, rowObject) {
                            //  $("#LogStr_" + rowObject.ID).find("option").remove();
                            var LogString = new Array();

                            switch (DataTypeStr) {
                                case "数值型":
                                    LogString = LogString_Num;
                                    break;
                                case "字符型":
                                    LogString = LogString_Str;
                                    break;
                                case "日期型":
                                    LogString = LogString_Date;
                                    break;
                                case "布尔值":
                                    LogString = LogString_Bool;
                                    break;
                            }
                            var str_retrun = '<select class="selectpicker" id="LogStr_' + rowObject.ID + '"  Title=""   data-width="65px" > ';
                            str_retrun += "<option value=''></option>";
                            for (var i = 0; i < LogString.length; i++) {
                                str_retrun += "<option value=\"" + LogString[i].value + "\">" + LogString[i].Str + "</option>";
                            }
                            str_retrun += '</select>';
                            return cellvalue = str_retrun;
                        },
                    },
                     
                    { 
                        label: '值1', name: 'SValue', width: 120, align: 'left',  sortable: false,
                        formatter: function (cellvalue, options, rowObject) {



                            
                            switch (DataTypeStr) {
                                case "数值型":
                                case "布尔值":
                                case "字符型":
                                    var str_retrun = '<input type="text" class="form-control"  id="SValue_' + rowObject.ID + '"  value="' + cellvalue + '"  />';
                                    return cellvalue = str_retrun;
                                    break;
                                case "日期型":
                                    var str_retrun = '<input type="text" class="form-control"  id="SValue_' + rowObject.ID + '"    value="' + cellvalue + '"  onclick="WdatePicker({ dateFmt: \'yyyy-MM-dd\'})" />';
                                    return cellvalue = str_retrun;
                                    break;
                            }

                            //var str_retrun = '<input type="text" class="form-control"  id="SValue_' + rowObject.ID + '"  value="' + cellvalue + '"  />';
                            //return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '值2', name: 'DValue', width: 120, align: 'left',  sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            switch (DataTypeStr) {
                                case "数值型":
                                case "布尔值":
                                case "字符型":
                                    var str_retrun = '<input type="text" class="form-control"  id="DValue_' + rowObject.ID + '"  value="' + cellvalue + '"  />';
                                    return cellvalue = str_retrun;
                                    break;
                                case "日期型":
                                    var str_retrun = '<input type="text" class="form-control"  id="DValue_' + rowObject.ID + '"   value="' + cellvalue + '"   onclick="WdatePicker({ dateFmt: \'yyyy-MM-dd\'})" />';
                                    return cellvalue = str_retrun;
                                    break;
                            }

                            //var str_retrun = '<input type="text" class="form-control"  id="DValue_' + rowObject.ID + '"  value="' + cellvalue + '"  />';
                            //return cellvalue = str_retrun;
                        },
                    },
                    {
                        label: '颜色', name: 'Color', width: 180, align: 'left',   sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                             
                            var str_retrun = '<div id="ColorInput_' + rowObject.ID + '" class="input-group colorpicker-component"  style="height:12px;top:5px">';
                            str_retrun += '  <input type="text" style="height:12px" class="form-control input-lg"  id="ColorInputStr_' + rowObject.ID + '" value="' + cellvalue + '" />';
                            str_retrun += '      <span class="input-group-addon" style="height:12px"><i style="height:12px"></i></span>';
                            str_retrun += '    </div> ';
                           
                            return cellvalue = str_retrun;

                        }
                    }, {
                        label: '是否影响全行', name: 'AllRowFlag', width: 80, align: 'left', sortable: false,
                        formatter: function (cellvalue, options, rowObject) {
                            if (cellvalue ) {
                                var str_retrun = '<input type="checkbox"    name="AllRowFlag_' + rowObject.ID + '" ';
                                str_retrun += ' id="AllRowFlag_' + rowObject.ID + '"   checked="checked"/>  ';
                                return cellvalue = str_retrun;
                            }
                            else {
                                var str_retrun = '<input type="checkbox"    name="AllRowFlag_' + rowObject.ID + '" ';
                                str_retrun += ' id="AllRowFlag_' + rowObject.ID + '"     />  ';
                                return cellvalue = str_retrun;
                            }


                        }
                    } ,


            ],
          
            viewrecords: true,
            rownumbers: true,
            multiselect: true,
            rowNum: 500,
           
            gridComplete: function () {
                $("#gridList").setGridParam().hideCol("ColId");//隐藏 
                $("#gridList").setGridParam().hideCol("ID");//隐藏 
                $("#gridList").setGridParam().hideCol("LogStr");//隐藏 
                
                var strIds = $("#gridList").jqGrid("getDataIDs");
                if (FirstShow == 0) {
                    for (var i = 0; i < strIds.length; i++) {
                        var ID = $("#gridList").jqGrid("getCell", strIds[i], "ID");
                        var LogStr = $("#gridList").jqGrid("getCell", strIds[i], "LogStr");
                        $('#ColorInput_' + ID).colorpicker();
                        $("#LogStr_" + ID).selectpicker('refresh');
                        if (LogStr != "")
                        {
                            $("#LogStr_" + ID).val(  LogStr );
                            $("#LogStr_" + ID).selectpicker('refresh');
                        }

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

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


        });
    }

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

    }

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

    }

    //换栏位
    function ChangeCols() {
        NewLine = 0;
        FirstShow = 0;
        gridList();
    }
     

    //新增一行
    function btn_ADD() {
        NewLine = NewLine + 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,
            {//ID	ColId	LogStr	SValue	DValue	Color	AllRowFlag
                "ID": NewLine.toString(),
                "ColId": $('#Select_cols').val(),
                "LogStr": "",
                "SValue": "",
                "DValue": "",
                "Color": "",
                "AllRowFlag": false,
                
            },
           "last");
        var unwritten = document.getElementsByClassName("unwritten")[0];
        if (unwritten != null && unwritten != 'undefined') {
            unwritten.style.display = "none";
        }
        // $(".unwritten").attr("display", "none");


        //colorpick
        var strIds = $("#gridList").jqGrid("getDataIDs");
        var rr = strIds.length - 1;
        var ID = $("#gridList").jqGrid("getCell", strIds[rr], "ID");
         
        $('#ColorInput_' + ID).colorpicker();
        $("#LogStr_" + ID).selectpicker('refresh');

    }

    //删除选中行
    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 btn_Save() {
        var SubmitLine = new Array();
        var strIds = $("#gridList").jqGrid("getDataIDs");
        for (var i = 0; i < strIds.length; i++) {
            //ID	ColId	LogStr	SValue	DValue	Color	AllRowFlag
            var ID = $("#gridList").jqGrid("getCell", strIds[i], "ID");
            var LogStr = $("#LogStr_" + ID).val();
            var SValue = $("#SValue_" + ID).val();
            var DValue = $("#DValue_" + ID).val();
            var Color = $("#ColorInputStr_" + ID).val();
            var AllRowFlag = checkboxToNumStr(document.getElementById("AllRowFlag_" + ID));
            
            var obj = {
                ID:"",
                ColId: $('#Select_cols').val(),
                LogStr: LogStr,
                SValue: SValue,
                DValue: DValue,
                Color: Color,
                AllRowFlag: AllRowFlag,
               
               
            }
            SubmitLine.push(obj);
        }
       
        $.ajax({
            url: "/SystemManage/CommonReport/SetGridFormat" + "?" + Math.random(),
            type: "post",
            data: { ColId: $('#Select_cols').val(), List_GridFormat: JSON.stringify(SubmitLine), },
            async: false,
            success: function (data) {
                alert(data);
            },
            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">
            <table class="form" style="width:700px" >

                <tr>
                    <th class="formTitle">字段名称:  </th>
                    <td class="formValue" style="width:160px">

                        <select id="Select_cols" name="Select_cols"  onchange="ChangeCols()" title="" class="selectpicker  " data-width="140px" style="margin-right:100px"></select>

                    </td>
                    <td class="formValue">

                        <a id="Btn_ADD" authorize="yes" class="btn btn-primary dropdown-text  " onclick="btn_ADD()"><i class="fa fa-plus"></i>添加格式化条件</a>
                    </td>
                    <td class="formValue">
                        <a id="Btn_Del" authorize="yes" class="btn btn-primary dropdown-text  " onclick="btn_Del()"><i class="fa fa-minus"></i>移除格式化条件</a>
                    </td>
                    <td class="formValue">
                        <a id="Btn_Save" authorize="yes" class="btn btn-primary dropdown-text  " onclick="btn_Save()"><i class="fa fa-save"></i>保存</a>
                    </td>
                </tr>
                </table>
</div>

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